0
点赞
收藏
分享

微信扫一扫

事件冒泡/捕获/委托/节流/防抖

梅梅的时光 2022-03-11 阅读 86
前端

一.事件冒泡是指从最深层向外执行

二·事件捕获是从最外层向里面深层执行

addEventListener第三个参数设置为true就是捕获

三.事件代理/事件委托,绑定父元素响应事件,让下面的子元素点击都有效果。


四.事件节流控制触发的最小间隔如一个事件100ms内只能触发一次 

 function throttle(fun,time){

let t1=0 //初始时间

return function(){

  let t2=new Date() //当前时间

  if(t2-t1>time){  

  fun.apply(this,arguments)  

  t1=t2   } } }


五.事件防抖,如设置200ms再执行,如没到200ms再点击就取消上一次重新计时用于表单验证,关键词联想,键盘输入。

function debounce(fun,time){  

let timer  return function(){    clearTimeout(timer)  

 let args = arguments  

 timer=setTimeout(()=>{      fun.apply(this,args)  

},time

) } }


六,异步加载事件处理器,用async, await

const el = document.querySelector('.delete');

el.addEventListener('click', async () => {

  try {

    const event = await import('./event/delete.js');

    // ...

  } catch (e) {

    // ...

  }

});

 

 

 

 

 

 

举报

相关推荐

0 条评论