委托事件（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方法实现委托

?

1 2 3 4

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

　delegate方法

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