DOM事件与事件委托

DOM事件与事件委托

1.绑定事件的几种方式

  1. 直接在dom元素上面绑定
 
  1. 在JS中进行绑定
let div = document.getElementById("main");
div.onclick = function(){
     alert('div被点击了!');
}

3.事件监听方式 addEventListener

main.addEventListener('click',fn,boolean);    //  第一个参数表示具体的事件。第二个参数表示执行的函数,
// 第三个参数表示是否在捕获阶段(下面会讲捕获和冒泡)

2.冒泡与捕获

现有如下代码,给每个元素都绑定了一个点击事件,当我单击id为son的div时,另外两个div的点击事件也会执行,那么执行的顺序如何呢?

下面请看DOM事件机制

DOM事件机制.png

每发生一个事件,JS引擎会从最高层级window对象上开始找事件函数,依次往下最后到目标对象上面,一旦找到在捕获阶段的事件函数便执行这个过程叫做捕获阶段,相反冒泡阶段从目标对象身上依次向上找事件函数,直到window对象,找到事件函数便执行,每发生一个事件都遵循这样一个过程 捕获 > 冒泡

//   使用addEventListener 方法可以设置事件函数所在的阶段
div.addEventListener('click',fn,boolean);   // 参数一,表示事件类型,参数二表示事件函数,参数三 : true 表示函数放在捕获阶段执行,不写或者为 falsy值   (NaN,'',0,null,undefined)或false 表示放在冒泡阶段执行

这样一来,在嵌套关系的元素上触发相同事件的执行顺序就能控制了(并不是完全控制)

特例:

只有一个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 或者用户操作动态的增加或者去除列表项元素,那么在每一次改变的时候都需要重新给新增的元素绑定事件,给即将删去的元素解绑事件,如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层的,和目标元素的增减是没有关系的,执行到目标元素是在真正响应执行事件函数的过程中去匹配的;

你可能感兴趣的:(DOM事件与事件委托)