一.事件冒泡是指从最深层向外执行
二·事件捕获是从最外层向里面深层执行
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) {
// ...
}
});