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