JS事件委托

时间 2019-12-14

标签事件委托栏目 JavaScript 繁體版

原文原文链接

一：Hello html

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

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

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

二：原理分析spa

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

1.DOM 结构htm

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

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

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

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>