根据事件冒泡机制，当上一级元素也有同名事件时，会自动触发。
<!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>事件冒泡</title></head><body><div><button>点击</button></div><script>document.querySelector('button').onclick = function () {console.log(this.tagName);};//根据事件冒泡机制，当上一级元素也有同名事件时，会自动触发//button 父级 divdocument.querySelector('div').onclick = function () {console.log(this.tagName);};//div 父级 bodydocument.querySelector('body').onclick = function () {console.log(this.tagName);};//body 父级 htmldocument.querySelector('html').onclick = function () {console.log(this.tagName);};</script></body></html>
1.基于事件委托原理，点击子元素，也会触发父元素
2.点击子元素（如li），等同点击父元素(如ul)
3.将事件绑定到父元素即可实现事件委托
<!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>事件委托</title></head><body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>//以下关于事件委托总结://1.基于事件委托原理，点击子元素，也会触发父元素//2.点击子元素（如li），等同点击父元素(如ul)//3.将事件绑定到父元素即可实现事件委托//具体调用方法如下：// document.querySelector('ul').onclick = function (ev) {// console.log(ev.target.textContent);// };//任务：点击<li>,显示出它的内容文本//（一）传统方式// document.querySelectorAll('li').forEach((li) => {// // console.log(li.textContent);// li.onclick = () => {// console.log(li.textContent);// };// });//（二）事件冒泡方法//原理：li.onclick 必然会在 ul.onclick 上触发，只要在ul上写一个点击事件document.querySelector('ul').onclick = function () {// console.log(li.textContent);// console.log(this)// 事件委托中，不要用this// this 不能用它来引用事件触发主体};//事件对象参数//事件方法传参：要么传“事件对象”，要么就不要传参document.querySelector('ul').onclick = function (ev) {//ev：事件对象//console.log(ev);// 事件委托：事件主体不再是一个元素// 事件主体：二部分组成// 1.事件绑定“主体”：被添加了事件属性的元素，<ul>// ev.currentTarge// console.log(ev.currentTarget);// 2. 事件“触发”主体：用户实际点击的元素，<li>// ev.targe// console.log(ev.target);console.log(ev.target.textContent);//事件主体再讲：绑定主体，触发主体是父子关系 或 祖孙关系// 事件委托：事件主体一分为二};</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
