網(wǎng)站如何制作浙江技能培訓班
目錄
前言
課前思考
for循環(huán)注冊事件
語法
事件委托
1.事件委托的好處是什么?
2.事件委托是委托給了誰，父元素還是子元素
3.如何找到真正觸發(fā)的元素
示例代碼
總結(jié)
前言
才子佳人，自是白衣卿相
課前思考
1.如果同時給多個元素注冊事件，我們怎么做的?
for循環(huán)注冊事件
語法
const lis = document.querySelectorAll('ul li');for(leti=0;i< lis.length; i++){lis[i].addEventListener('click',function(){alert('我被點擊了')})2.有沒有一種技巧 注冊一次事件就能完成以上效果呢?
事件委托
事件委托是利用事件流的特征解決一些開發(fā)需求的知識技巧
優(yōu)點:減少注冊次數(shù)，可以提高程序性能原理:事件委托其實是利用事件冒泡的特點。給父元素注冊事件，當我們觸發(fā)子元素的時候，會冒泡到元素身上，從而觸發(fā)父元素的事件
1.事件委托的好處是什么?
減少注冊次數(shù)，提高程序性能
2.事件委托是委托給了誰，父元素還是子元素
3.如何找到真正觸發(fā)的元素
事件對象.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標簽</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é)
斗酒彘肩，風雨渡江