js事件委托詳解
1、每個函數(shù)都是對象,占用內(nèi)存。內(nèi)存中的對象越多,性能越差。解決事件處理過多問題的辦法是事件委托。
2、事件委托冒泡,只指定一個事件處理程序,就可以管理某一類型的所有事件。
實例
<ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text3</li> </ul>
Ie9以下瀏覽器中的事件對象是放在全局中的window.event;
解決兼容性:event = event || window.event
事件委托(就是將事件綁定到父級/爺爺級對象上,通過事件對象的target屬性來控制子級對象的改變):
event.target(點擊的目標(biāo)對象)
<!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) { //點擊子級對象改變顏色 event.target.style.backgroundColor = "black"; } </script> </html>
到此這篇關(guān)于js事件委托詳解的文章就介紹到這了,更多相關(guān)js事件委托如何理解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript學(xué)習(xí)筆記整理_用于模式匹配的String方法
下面小編就為大家?guī)硪黄狫avaScript學(xué)習(xí)筆記整理_用于模式匹配的String方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09JS失效 提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁 utf-8 覆蓋(META 標(biāo)記)的沖突的代
今天使用F12調(diào)試的時候提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁 utf-8 覆蓋(META 標(biāo)記)的沖突的代碼頁 utf-8,需要的朋友可以參考下2017-06-06JavaScript中對DOM節(jié)點的訪問、創(chuàng)建、修改、刪除
這篇文章主要介紹了JavaScript中對DOM節(jié)點的訪問、創(chuàng)建、修改、刪除,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-11-11JavaScript數(shù)據(jù)類型轉(zhuǎn)換
本文詳細(xì)講解了JavaScript實現(xiàn)數(shù)據(jù)類型轉(zhuǎn)換的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03JavaScipt基本教程之JavaScript語言的基礎(chǔ)
2008-01-01