網(wǎng)站如何制作浙江技能培訓(xùn)班
目錄
前言
課前思考
for循環(huán)注冊(cè)事件
語法
事件委托
1.事件委托的好處是什么?
2.事件委托是委托給了誰，父元素還是子元素
3.如何找到真正觸發(fā)的元素
示例代碼
總結(jié)
前言
才子佳人，自是白衣卿相
課前思考
1.如果同時(shí)給多個(gè)元素注冊(cè)事件，我們?cè)趺醋龅?
for循環(huán)注冊(cè)事件
語法
const lis = document.querySelectorAll('ul li');for(leti=0;i< lis.length; i++){lis[i].addEventListener('click',function(){alert('我被點(diǎn)擊了')})2.有沒有一種技巧 注冊(cè)一次事件就能完成以上效果呢?
事件委托
事件委托是利用事件流的特征解決一些開發(fā)需求的知識(shí)技巧
優(yōu)點(diǎn):減少注冊(cè)次數(shù)，可以提高程序性能原理:事件委托其實(shí)是利用事件冒泡的特點(diǎn)。給父元素注冊(cè)事件，當(dāng)我們觸發(fā)子元素的時(shí)候，會(huì)冒泡到元素身上，從而觸發(fā)父元素的事件
1.事件委托的好處是什么?
減少注冊(cè)次數(shù)，提高程序性能
2.事件委托是委托給了誰，父元素還是子元素
3.如何找到真正觸發(fā)的元素
事件對(duì)象.target.tagName示例代碼
<!DOCTYPE html>
<html lang="en">
?
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.highlight {background-color: red;}</style>
</head>
?
<body><ul><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><p>我是p標(biāo)簽</p></ul><script>const ul = document.querySelector('ul');ul.addEventListener('click', function (e) {if (e.target.tagName === 'LI') {e.target.classList.toggle('highlight');}});</script>
</body>
?
</html>總結(jié)
斗酒彘肩，風(fēng)雨渡江