js事件委托詳解
1、每個(gè)函數(shù)都是對(duì)象,占用內(nèi)存。內(nèi)存中的對(duì)象越多,性能越差。解決事件處理過(guò)多問(wèn)題的辦法是事件委托。
2、事件委托冒泡,只指定一個(gè)事件處理程序,就可以管理某一類(lèi)型的所有事件。
實(shí)例
<ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text3</li> </ul>
Ie9以下瀏覽器中的事件對(duì)象是放在全局中的window.event;
解決兼容性:event = event || window.event
事件委托(就是將事件綁定到父級(jí)/爺爺級(jí)對(duì)象上,通過(guò)事件對(duì)象的target屬性來(lái)控制子級(jí)對(duì)象的改變):
event.target(點(diǎn)擊的目標(biāo)對(duì)象)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> td{ width: 100px; height: 100px; border:2px solid red; } </style> </head> <body> <table > <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> </table> </body> <script> var tab = document.getElementsByTagName("table")[0]; tab.onclick = function (event) { //點(diǎn)擊子級(jí)對(duì)象改變顏色 event.target.style.backgroundColor = "black"; } </script> </html>
到此這篇關(guān)于js事件委托詳解的文章就介紹到這了,更多相關(guān)js事件委托如何理解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript學(xué)習(xí)筆記整理_用于模式匹配的String方法
下面小編就為大家?guī)?lái)一篇JavaScript學(xué)習(xí)筆記整理_用于模式匹配的String方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09JS失效 提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁(yè) utf-8 覆蓋(META 標(biāo)記)的沖突的代
今天使用F12調(diào)試的時(shí)候提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁(yè) utf-8 覆蓋(META 標(biāo)記)的沖突的代碼頁(yè) utf-8,需要的朋友可以參考下2017-06-06JavaScript中對(duì)DOM節(jié)點(diǎn)的訪(fǎng)問(wèn)、創(chuàng)建、修改、刪除
這篇文章主要介紹了JavaScript中對(duì)DOM節(jié)點(diǎn)的訪(fǎng)問(wèn)、創(chuàng)建、修改、刪除,是JavaScript入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-11-11JavaScript數(shù)據(jù)類(lèi)型轉(zhuǎn)換
本文詳細(xì)講解了JavaScript實(shí)現(xiàn)數(shù)據(jù)類(lèi)型轉(zhuǎn)換的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03JavaScipt基本教程之JavaScript語(yǔ)言的基礎(chǔ)
2008-01-01JavaScript入門(mén)教程(6) Window窗口對(duì)象
他是JavaScript中最大的對(duì)象,它描述的是一個(gè)瀏覽器窗口。一般要引用它的屬性和方法時(shí),不需要用“window.xxx”這種形式,而直接使用“xxx”。一個(gè)框架頁(yè)面也是一個(gè)窗口。2009-01-01