4/11/关于事件监听

[ChenPt]

当为一个元素绑定两个监听事件，分别在冒泡和捕获的阶段触发。

如果event.target是当前绑定了两个监听事件的元素，那么先定义的监听事件会先执行（无论冒泡或者捕获）。如果event.target不是当前元素，则会先执行捕获再执行冒泡

[ChenPt]

事件节流： 一个事件在某段时间内不会重复执行。过了这段时间才会执行 实现：设置一个标志，每次执行函数前判定该标志是否为真，如果为假直接返回，如果为真，则执行，并利用定时器设置一个特定的时间，在这时间到了之后设置标志为假。

function throttle(fn, wait) {
    let flag = true;
    return function() {
        if(!flag)  return;
        flag = false;
        //当事件触发，fn被调用时，this指向绑定了事件的DOM元素，这里是out
        //还有就是事件绑定的回调函数默认有event对象参数，需要将这个参数重新传给fn
        fn.apply(this, arguments);
        setTimeout(() => {
            flag = true
        }, wait)
    } 
}

事件防抖：事件触发需要等待一个指定的时间后才真正执行。

function debounce(fn, wait) {
    let timeout;
    return function() {
        clearTimeout(timeout)

        //使用箭头函数，this指向的是匿名函数。当fn为某个元素事件监听的回调函数时，this就指向了该元素
        timeout = setTimeout(() => {
            fn.apply(this,arguments)
        }, wait)
    }
}