使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]
使用事件委托降低重復的事件綁定,從而降低dom操作的對性能的消耗[兼容IE版]
原理：
W3C將DOM2.0模型中事件處理流程分為三個階段：
一、事件捕獲階段：
當某個元素觸發(fā)某個事件（如onclick），頂層對象document就會發(fā)出一個事件流，隨著DOM樹的節(jié)點向目標元素節(jié)點流去，直到到達事件真正發(fā)
生的目標元素。在這個過程中，事件相應的監(jiān)聽函數(shù)是不會被觸發(fā)的。
二、事件目標階段：
當?shù)竭_目標元素之后，執(zhí)行目標元素該事件相應的處理函數(shù)。如果沒有綁定監(jiān)聽函數(shù)，那就不執(zhí)行。
三、事件起泡階段：
事件起泡：從目標元素開始，往頂層元素傳播。途中如果有節(jié)點綁定了相應的事件處理函數(shù)，這些函數(shù)都會被一次觸發(fā)。
IE及Opera（老版本的Opera）下，是不支持事件捕獲的（）。而這個特點最明顯體現(xiàn)在事件綁定函數(shù)上。
demo：使用事件委托實現(xiàn)點擊li標簽打印對應li的innerText，兼容IE
dom結(jié)構(gòu)：
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> </body>
JavaScript：
// 兼容IE寫法var ulElement = document.getElementsByTagName('ul')[0];if (ulElement.addEventListener) {ulElement.addEventListener('click', function (e) {if (e.target.nodeName.toLowerCase() == 'li') {console.log(e.target.innerText);}}, false)// false 表示在事件第三階段（冒泡）觸發(fā)，true表示在事件第一階段（捕獲）觸發(fā)。} else {// 兼容IE瀏覽器,需要注意的點有attachEvent, onclick, srcElementulElement.attachEvent('onclick', function (e) {//IE沒有e.target，有e.srcElementvar target = e.srcElement;if (target.nodeName.toLowerCase() == 'li') {console.log('IE下---' +target.nodeName.innerText);}})}
擴展：
阻止事件冒泡：e.stopPropagation() ||e.cancelBubble = true（后者適用IE，true為阻止冒泡）
阻止默認事件：e.preventDefault() || e.returnValue = false (后者適用IE，false為阻止默認事件)
總結(jié)
以上是生活随笔為你收集整理的使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 链家app如何查历史成交(成都二手房网)
- 下一篇： Mint-ui框架Index List