标签:点击 || spl get onclick use doc app onload
1)什么是事件委托?
通过给父节点事件(委托给父节点)没然后通过事件的event对象去查找子节点(点击子节点会冒泡),然后对子节点进行需要的操作。
使用场景:当节点未渲染出来,无法获取到该子节点。或者子节点数量多,需要挨个遍历给事件,很消耗资源
window.onload = function(){ var oBtn = document.getElementById("btn"); var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName(‘li‘); var num = 4; //事件委托,添加的子元素也有事件 oUl.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == ‘li‘){ target.style.background = "red"; } }; oUl.onmouseout = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == ‘li‘){ target.style.background = "#fff"; } }; //添加新节点 oBtn.onclick = function(){ num++; var oLi = document.createElement(‘li‘); oLi.innerHTML = 111*num; oUl.appendChild(oLi); }; }
好处:我们可以给未渲染出来的节点进行操作,可以减少dom操作
标签:点击 || spl get onclick use doc app onload
原文地址:https://www.cnblogs.com/llcMite/p/10699915.html