相关知识整理：
- ev：事件对象；
- ev.target: 表示当前按钮，表示事件触发者；
- 事件监听的语法：addEventListener(事件名称，回调方法，传递机制/捕获/冒泡);false是冒泡阶段，ture是捕获阶段；
- setInterval()设置定时器；
- dispatchEvent() 分配事件，事件派出器，自动执行某个操作；
实例演示：
<body><button onclick="show(this)">按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>function show(ele){console.log(ele.innerHTML)}// ev.target表示当前按钮，表示事件触发者；const b=document.querySelector("button:nth-of-type(2)")b.onclick=(ev)=>console.log(ev.target,"您点击了按钮2")// 事件监听// addEventListener(事件名称，回调方法，传递机制/捕获/冒泡)const d3=document.querySelector("button:nth-of-type(3)")d3.addEventListener("click",(ev)=>console.log("点击了按钮3"),false)const last=document.querySelector("button:last-of-type")last.addEventListener("click",(ev)=>console.log("您点击了最后一个"),false)const ev=new Event("click");setInterval(()=>last.dispatchEvent(ev),1000)// setInterval()设置定时器</script></body>
事件代理也叫事件委托；
事件代理本质上就是将应该在子元素触发的事件，委托给父元素来执行，可以极大的简化代码和业务逻辑；
原理：：利用冒泡原理，把事件添加到父级，触发执行结果；
true：表示捕获阶段；false：表示冒泡阶段；
捕获是由外向内执行的，而冒泡是由外向内执行的；
根据冒泡原理，子元素的同名事件会冒泡到父元素的同名事件上，所有可以直接将事件添加到他的父元素上；
实例演示：
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>document.querySelectorAll("li").forEach((item)=>item.addEventListener("click",(ev)=>console.log("触发%s，绑定%s",ev.target,ev.currentTarget),false));document.querySelector("ul").addEventListener("click",(ev)=>console.log("触发%s，绑定%s",ev.target,ev.currentTarget),false);</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
