欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生js底层基础(二十一) 事件委托

程序员文章站 2022-06-16 10:26:43
...

事件委托

利用事件冒泡,和事件源对象进行处理

优点:
1.性能好,不需要循环所有的元素一个个绑定事件
2.灵活,当有新的子元素不需要重新绑定事件

面试题
有1个ul,里面有十个li,要求点击每个li输出对应的顺序

解法1:遍历子元素

1.var ulList = document.getElementsByTagName("ul")[0];
2.    var liList = document.getElementsByTagName("li");
3.
3.    for(var i = 0; i<liList.length; i ++){
4.        (function(n){
5.            liList[n].addEventListener("click",function(){
6.            console.log(n);
7.            },false)
8.        }(i))
9.    }

解法2:事件委托(最佳)
利用事件冒泡机制,可扩展性好

1.var ulList = document.getElementsByTagName("ul")[0];
2.
3.ulList.onclick = function(e){
4.        var event = e || window.e;
5.        var target = e.target || e.srcElement;
6.        console.log(target.innerText);
7.    }
相关标签: 事件委托