事件委托:将事件处理委托给祖籍元素
事件委托的实现方式:通过事件机制来实现事件委托
// 给几个元素绑定了点击事件
var wrap = document.querySelector(".wrap");
wrap.onclick = function (e) {
// console.log(this)
console.log(e.target);
// 明明给wrap 绑定点击事件;为什么可以 更改子元素样式呢?
// 因为 触发事件的目标元素是p ,利用事件机制实现的事件委托
e.target.style.color = "red";
};在这里插入代码片
事件冒泡
在【目标元素el】上触发事件,如果el的【祖籍元素】绑定了相同的事件,那么也会被触发。直到找到 root 跟元素为止。
执行顺序:目标元素—> 父元素—>祖籍元素
addEventListener() 监听某个元素的事件
参一:事件类型
参二:事件处理函数
参三:事件机制 冒泡或者不同 默认值 false 冒泡 (true 捕获)
// child.addEventListener("click", function () {
// console.log('child')
// }, false);
// box.addEventListener("click", function () {
// console.log('box')
// }, false);
// wrap.addEventListener("click", function () {
// console.log('wrap')
// }, false);
在这里插入代码片