您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何理解javascript事件委托”,在日常操作中,相信很多人在如何理解javascript事件委托問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”如何理解javascript事件委托”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
在javascript中,事件委托也稱為事件托管或事件代理,就是把目標(biāo)節(jié)點(diǎn)的事件綁定到祖先節(jié)點(diǎn)上;它是利用事件冒泡原理,管理某一類型的所有事件,利用父元素來代表子元素的某一類型事件的處理方式。
本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
在 JavaScript 中,事件委托(delegate)也稱為事件托管或事件代理,是利用事件冒泡原理,管理某一類型的所有事件,利用父元素來代表子元素的某一類型事件的處理方式。
這樣做的好處:優(yōu)化代碼,提升運(yùn)行性能,真正把 HTML 和 JavaScript 分離,也能防止出現(xiàn)在動(dòng)態(tài)添加或刪除節(jié)點(diǎn)過程中注冊(cè)的事件丟失的現(xiàn)象。
示例1
下面示例使用一般方法為列表結(jié)構(gòu)中每個(gè)列表項(xiàng)目綁定 click 事件,單擊列表項(xiàng)目,將彈出提示對(duì)話框,提示當(dāng)前節(jié)點(diǎn)包含的文本信息。但是,當(dāng)我們?yōu)榱斜砜騽?dòng)態(tài)添加列表項(xiàng)目之后,新添加的列表項(xiàng)目沒有綁定 click 事件,這與我們的愿望相反。
<button id="btn">添加列表項(xiàng)目</button> <ul id="list"> <li>列表項(xiàng)目1</li> <li>列表項(xiàng)目2</li> <li>列表項(xiàng)目3</li> </ul> <script> var ul = document.getElementById("list"); var lis = ul.getElementsByTagName("li"); for (var i = 0; i < lis.length; i ++) { lis[i].addEventListener('cluick', function (e) { var e = e || window.event; var target = e.target || e.srcElement; alert(e.target.innerHTML); }, false); } var i = 4; var btn = document.getElementById("btn"); btn.addEventListener("click", function() { var li = document.createElement("li"); li.innerHTML = "項(xiàng)目列表" + i++; ul.appendChild(li); }); </script>
示例2
下面示例借助事件委托技巧,利用事件傳播機(jī)制,在列表框 ul 元素上綁定 click 事件,當(dāng)事件傳播到父節(jié)點(diǎn) ul 上時(shí),捕獲 click 事件,然后在事件處理函數(shù)中檢測(cè)當(dāng)前事件響應(yīng)節(jié)點(diǎn)類型,如果是 li 元素,則進(jìn)一步執(zhí)行下面代碼,否則跳出事件處理函數(shù),結(jié)束響應(yīng)。
<button id="btn">添加項(xiàng)目列表</button> <ul id="list"> <li>列表項(xiàng)目1</li> <li>列表項(xiàng)目2</li> <li>列表項(xiàng)目3</li> </ul> <script> var ul = document.getElementById("list"); ul.addEventListener('click', function(e) { var e = e || window.event; var target = e.target || e.srcElement; if (e.target && e.target.nodeName.toUpperCase()=="LI") { alert(e.target.innerHTML); } }, false); var i = 4; var btn = document.getElementById("btn"); btn.addEventListener("click", function () { var li = document.createElement("li"); li.innerHTML = "項(xiàng)目列表" + i++; ul.appendChild(li); }); </script>
當(dāng)頁面存在大量元素并且每個(gè)元素注冊(cè)了一個(gè)或多個(gè)事件時(shí),可能會(huì)影響性能。訪問和修改更過的 DOM 節(jié)點(diǎn)時(shí),程序就會(huì)更慢;特別是事件連接過程都發(fā)生在 load(或 DOMContentReady)事件中時(shí),對(duì)任何一個(gè)富交互網(wǎng)頁來說,這都是一個(gè)繁忙的時(shí)間段。另外,瀏覽器需要保存每個(gè)事件句柄的記錄,也會(huì)占用更多內(nèi)存。
到此,關(guān)于“如何理解javascript事件委托”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。