更新時(shí)間:2021-10-29 來源:黑馬程序員 瀏覽量:
什么是事件委托?
由于事件會(huì)在冒泡階段向上傳播到父節(jié)點(diǎn),因此可以把子節(jié)點(diǎn)的監(jiān)聽函數(shù)定義在父 節(jié)點(diǎn)上,由父節(jié)點(diǎn)的監(jiān)聽函數(shù)統(tǒng)一處理多個(gè)子元素的事件,種方法叫做“事件代理”,也叫“事件委托”。
事件委托的原理:
利用事件冒泡,只指定一個(gè)事件處理程序來管理某一類型的所有事件。
事件委托的優(yōu)勢:
作減少DOM操作,節(jié)省內(nèi)存空間,提高性能。
事件委托常用方法:
event.target:對事件起源目標(biāo)的引用,屬性返回觸發(fā)事件的那個(gè)節(jié)點(diǎn)。
event.currentTarget:屬性返回事件當(dāng)前所在的節(jié)點(diǎn),即正在執(zhí)行的監(jiān)聽函數(shù)所綁定的那個(gè)節(jié)點(diǎn)。 作為比較,target屬性返回事件發(fā)生的節(jié)點(diǎn)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>event.target和event.currentTarget|http://web.itheima.com</title> <style> div{ padding: 40px; } #div3{ width: 300px; height: 300px; background-color: #AB1B1A; } #div2{ width: 200px; height: 200px; background-color: #F5E1C6; } #div1{ width: 100px; height: 100px; background-color: #fff; } </style> </head> <body> <div id="div3">3 <div id="div2">2 <div id="div1">1</div> </div> </div> </body> <script> var div3 = document.getElementById('div3'); div3.onclick = function(e){ //返回事件綁定的節(jié)點(diǎn) console.log(e.currentTarget); //返回觸發(fā)節(jié)點(diǎn) console.log(e.target); } </script> </html>
事件綁定在div3上, 點(diǎn)擊div1,e.currentTarget返回綁定事件元素div3,e.target返回觸發(fā)事件元素div1。
簡單事件委托實(shí)現(xiàn)
功能:依次點(diǎn)擊div1,div2,div3盒子變?yōu)榧t色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>event.target和event.currentTarget|http://web.itheima.com</title> <style> div{ padding: 40px; } #div3{ width: 300px; height: 300px; border: 1px solid red; } #div2{ width: 200px; height: 200px; border: 1px solid red; } #div1{ width: 100px; height: 100px; border: 1px solid red; } </style> </head> <body> <div id="div3">3 <div id="div2">2 <div id="div1">1</div> </div> </div> </body> <script> let div3 = document.getElementById("div3"); // 點(diǎn)擊事件綁定到div3 div3.onclick = function(e){ // 觸發(fā)節(jié)點(diǎn)改變位紅色 e.target.style.background = "red"; } </script> </html>
猜你喜歡