JS-有关事件的知识（重点手写通用的事件绑定或监听函数）

JS-有关事件的知识（重点手写通用的事件绑定或监听函数）

一.事件绑定：

写一个通用的事件绑定函数


若不是按钮，是一个a标签，它的默认行为是点击跳转，preventDefault（）会阻止默认行为，不让跳转

二.事件冒泡：（利用上面的通用事件绑定函数）
1》事件冒泡的流程：

2》例子：

上述代码中：
①.点击p2p3p4p5p6取消，我们没有为这些标签绑定事件但是都会弹出取消的警示框，因为，事件冒泡的机制，p2p3p4标签会向上冒泡先找到div1，然后再冒泡找到body，发现body绑定了click取消事件，于是点击会触发该事件并弹出取消的警示框
（p5p6同理----->div2------->body）

②.在p1的点击事件中，若把e.stopProgagation() 注释掉，点击p1，会依次弹出“激活”“取消”的警示框，激活的警示框是自身的点击事件触发的，而取消的警示框是冒泡到body上，body的点击事件触发的。
加上e.stopProgagation() 后，会阻止事件冒泡，此时再点击p1则只会弹出激活

--------------------------------------------------------------------------------------------

三.事件代理：（在事件冒泡的机制基础上，我们才能实行事件代理）
JS事件代理就是通过给父级元素（例如：ul,tr等等）绑定事件，不给子级元素（例如:li,td等等）绑定事件，然后当点击子级元素时，通过事件冒泡机制在其绑定的父元素上触发事件处理函数，主要目的是为了提升性能，因为我不用给每个子级元素绑定事件，只给父级元素绑定一次就好了，在原生js里面就是通过event对象的taget属性实现。

四.手写高级一点的事件绑定（监听）函数

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
            // 代理绑定
            if (target.matches(selector)) {
            //matches是指，dom元素是否符合css选择器
 //这里指 触发事件的dom节点 a 符合 css选择器 ’a‘（selector）
                fn.call(target, event)
            }
        } else {
            // 普通绑定
            fn.call(target, event)
        }
    })
}
// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)//this为当前触发的元素（btn1）
})

// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    event.preventDefault()
    alert(this.innerHTML)//this为当前触发的元素（div3）
})

注意

这里不能用箭头函数，要是用箭头函数

这个this指向的就是window，而不是btn1 要注意