js事件委托
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操作
为什么要用事件委托!
1、事件绑定多了,会有性能问题!
如何解决事件绑定引起的性能问题?
1、使用事件委托
2、事件使用完要销毁事件绑定