zoukankan      html  css  js  c++  java
  • 委托事件(jQuery)

    <div class="content">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

    javascript实现委托事件

    实现原理

    event,target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

    知识点

    node.nodename

    nodeName 属性指定节点的节点名称。

    如果节点是元素节点,则 nodeName 属性返回标签名。

    如果节点是属性节点,则 nodeName 属性返回属性的名称。

    对于其他节点类型,nodeName 属性返回不同节点类型的不同名称。

    document.getElementsByClassName('content')[0].addEventListener('click',function (event) {
            if (event.target.nodename='li'){
            console.log(event.target);
            alert('被点了');
         }
    })

    jquery实现委托事件

    on方法实现委托

    $('.content').on('click','li',function () {
                console.log(event.target);
                alert('被点了');
            });
    

     delegate方法

    $('.content').delegate('li','click',function () {
                console.log(event.target);
                    alert('被点了');
            })
    heroes never die!
  • 相关阅读:
    yaf(3) 正则路由
    yaf(1) 配置文件
    PHP 分页URL设计
    smarty模版目录疑问
    yaf(5) smarty
    yaf(2) layout 自定义目录结构
    php 倒计时出现0的情况
    PHP 单一入口框架设计简析
    利用jquery.load()实现html框架效果
    yaf(4) Yaf_Loader()
  • 原文地址:https://www.cnblogs.com/daiSir/p/10929340.html
Copyright © 2011-2022 走看看