DOM事件与事件委托
1.绑定事件的几种方式
- 直接在dom元素上面绑定
<div id="main" onclick="javascript:alert('div被点击了!')"></div>
<!-- 相当于下面这种 -->
<div id="main" onclick="ale();"></div>
<script>
function ale(){
alert('div被点击了!');
}
</script>
- 在JS中进行绑定
let div = document.getElementById("main");
div.onclick = function(){
alert('div被点击了!');
}
3.事件监听方式 addEventListener
main.addEventListener('click',fn,boolean); // 第一个参数表示具体的事件。第二个参数表示执行的函数，
// 第三个参数表示是否在捕获阶段(下面会讲捕获和冒泡)
2.冒泡与捕获
现有如下代码，给每个元素都绑定了一个点击事件，当我单击id为son的div时，另外两个div的点击事件也会执行，那么执行的顺序如何呢？
<div id="grandfather">
<div id="father">
<div id="son"></div>
</div>
</div>
下面请看DOM事件机制
DOM事件机制.png
每发生一个事件，JS引擎会从最高层级window对象上开始找事件函数，依次往下最后到目标对象上面，一旦找到在捕获阶段的事件函数便执行这个过程叫做捕获阶段，相反冒泡阶段从目标对象身上依次向上找事件函数，直到window对象，找到事件函数便执行，每发生一个事件都遵循这样一个过程 捕获 > 冒泡
// 使用addEventListener 方法可以设置事件函数所在的阶段
div.addEventListener('click',fn,boolean); // 参数一，表示事件类型，参数二表示事件函数，参数三 ： true 表示函数放在捕获阶段执行，不写或者为 falsy值 (NaN,'',0,null,undefined)或false 表示放在冒泡阶段执行
<div id="grandfather">
<div id="father">
<div id="son"></div>
</div>
</div>
<script>
let grand = document.getElementById("grandfather");
let fath = document.getElementById("father");
let son = document.getElementById("son");
let ale = function(){
alert(this.id + '被点击了!');
}
grand.addEventListener('click',ale,true); // 都在捕获阶段
fath.addEventListener('click',ale,true);
son.addEventListener('click',ale,true);
//当我点击id为son的div时, 依次弹出 grandfather被点击了！ father被点击了！ son被点击了！
</script>
这样一来，在嵌套关系的元素上触发相同事件的执行顺序就能控制了(并不是完全控制)
特例：
只有一个div被监听(不考虑父子同时被监听),fn 分别在捕获阶段和冒泡阶段监听click 事件,用户点击的元素就是开发者监听的，则谁先监听谁先执行
div.addEventLisenter('click', f1) // f1 先执行
div.addEventLisenter('click', f2, true)
3.事件对象event
div.onclick = function(event){ // event(也可以是别的名字)对象里面有事件的详细信息，会被传给所有的事件监听函数，事件结束后，event对象就消失
event.target; //
}
e.target 与 e.currentTarget 的区别
- e.target -用户操作的元素
- e.currentTarget- 程序员监听的元素
- this是e.currentTarget
取消冒泡
e.stopPropagation(); // 取消冒泡，从该元素开始冒泡将停止执行 —般用于封装某些独立的组件工
取消滚动动作
// pc端
div.addEventListener('wheel',(e) => { // 滚轮事件
e.preventDefault(); // 阻止默认事件
})
// 然后CSS设置 ::webkit-scrollbar{
// width:0;!important
//} 即可实现无滚动
// 移动端
div.addEventListener('touchstart',(e) => { // 触摸事件
e.preventDefault(); // 阻止默认事件
})
4.自定义事件
const event = new CustomEvent('xiaoou',{ // 创建自定义事件对象
default:{
name:'xiaoou',
age:18
}
})
button1.dispatchEvent(event); // 添加自定义事件
button1.addEventListener('xiaoou',fn); // 就可以使用此事件了
5.事件委托
通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡或者捕获(一般都使用冒泡)机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
场景一：
给100个按钮添加点击事件，父级元素是div
div.addEventListener('click',(e) => { // 在父级元素上面监听
const t = e.target; // 获取用户点击的元素
console.log(t); // 执行相应的操作
}) // 这便是一种事件委托
场景二：
监听目前不存在的元素(动态绑定事件)
div.addEventListener('click',(e) => { // 同样还是在即将出现的元素的父级元素上面监听
const t = e.target; // 获取用户点击的元素(假设它两秒后才出现)
console.log(t); // 执行相应的操作
}) // 这也是一种事件委托 监听了动态元素
优点
- 节省监听器的数量(节省内存)
- 可以监听动态元素，在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件，如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；
