原生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. }
上一篇: JS学习笔记 Day-6