事件委托(代理)
事件委托:當我們需要對很多元素添加事件的時候,可以通過將事件添加到它們的父節點而將事件委托給父節點來觸發處理函數。這主要得益於瀏覽器的事件冒泡機制。
例如:
<ul id="ul1"> var oUl = document.getElementById("ul1");
<li>111</li> var aLi = oUl.getElementsByTagName(‘li‘);
<li>222</li> for(var i=0;i<aLi.length;i++){
<li>333</li> aLi[i].onclick = function(){
<li>444</li> alert(123);
</ul> }
}
備註:事件委托主要是為了減少DOM操作,4個li事件,每當for一次,點擊一次就會查找一次oUl.getElementsByTagName();總共4次DOM操作+1次查找ulDOm操作
如果將onclick事件委托於其父元素即<ul> ,則只需要1次Dom操作,從而大大優化性能。
var oUl = document.getElementById("ul1");
oUl.onclick = function(){
alert(123);
}
當然其中ul也會觸發自身的事件,我們可以使用event.target來進行對所點事件的綁定。
優點:大大減少dom的操作
具體詳情請見:https://www.cnblogs.com/liugang-vip/p/5616484.html
事件委托(代理)