JS事件委托

一：Hello 

js中事件委托主要是为了解决两个问题

  1）在节点比较多的时候循环绑定事件比较占内存，浪费性能

  2）新追加节点的事件的注册

二：原理分析

  直接上demo，结尾处有完整代码。

  1.DOM 结构

    <ul id="ul">
        <li>aaaaaaaa</li>
        <li>bbbbbbbb</li>
        <li>cccccccc</li>
    </ul>

  2.需求是给每个li注册一个绑定事件 fnClick

  这是传统方式，获取li，循环绑定

1       for ( var i = 0; i < aLi.length; i++ ) {
2           aLi[i].onclick = fnClick;
3       }

　　tips： 会遇到的问题是 1.浪费性能  2.新追加节点无法添加事件 3.写法丑   -- 如开头所说 

  事件委托登场 

1         oUl.onclick = function (ev) {  
2             var target = ev.target;
3 //          对于元素节点来说 nodeName 和 tagName 是一样的
4             if (target.tagName.toLowerCase() == 'li') {
5                 console.log(target.innerHTML);
6             }
7         };

  tips:

　　1.委托的原理是将事件添加到父节点ul 上，在通过事件对象来找到对应的节点

　　2.对于元素节点来说，nodeName 和 tagName 是一样的，获取到的是标签的 大写 名 

　　3.使用事件委托的时候新添加的节点也会有对应的事件

  具体见完整代码（作为暖男，我特意去掉了行号，方便复制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <style>
        li { border: 1px solid #999; margin-bottom: 10px; }
    </style>
</head>
<body>
    <button id="btn">追加节点</button>
    <ul id="ul">
        <li>aaaaaaaa</li>
        <li>bbbbbbbb</li>
        <li>cccccccc</li>
    </ul>
    <script>
        var oUl = document.getElementById("ul");
        var aLi = oUl.getElementsByTagName("li");

        var addBtn = document.getElementById("btn");
        var num = 0;

        var fnClick = function () { console.log(1); };

//        这个是十分丑陋的而且十分浪费性能的解决方式
//        for ( var i = 0; i < aLi.length; i++ ) {
//            aLi[i].onclick = fnClick;
//        }

        oUl.onclick = function (ev) {
            var target = ev.target;
//          对于元素节点来说 nodeName 和 tagName 是一样的
            if (target.tagName.toLowerCase() == 'li') {
                console.log(target.innerHTML);
            }
        };

        addBtn.onclick = function () {
            num ++;
            var newLi = document.createElement("li");
            newLi.innerHTML = num * 111111;
            oUl.appendChild( newLi );
        };
    </script>
</body>
</html>

 

posted @ 2016-11-03 14:50  李二leon  阅读(219)  评论(0)  编辑  收藏  举报