WebAPI之 事件 Better

事件绑定

　　事件绑定

const btn = document.getElementById('btn1')
// 主流浏览器
btn.addEventListener('click', event => {
    console.log('clicked me')
})
// IE8 及更早版本
btn.attachEvent('click', function(event) {
    console.log('clicked me')
})

　　通用的事件绑定函数

// 通用的绑定函数
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

// 测试
const a = document.getElementById('link1')
bindEvent(a, 'click', event => {
    console.log(event.target) // 触发点击的元素
    event.preventDefault() // 阻止默认行为
    alert('clicked me')
})

事件冒泡

事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）

event.stopPropagation() // 阻止事件冒泡

事件代理

是基于事件冒泡机制实现的，把事件绑定到父元素上。

* 代码简洁

* 减少浏览器内存占用

* 但是，不要滥用（不要为了用代理而用代理，比如单个元素，事件的监听就没有必要使用）

function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

const div = document.getElementById('div1')
bindEvent(div, 'click', event => {
    event.preventDefault() // 阻止默认行为
    const target = event.target
    if (target.nodeName === 'A') {
        alert(target.innerHTML)
    }
})

改进通用绑定函数，简化代理的事件绑定应用

// 通用的事件绑定函数
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)) {
                fn.call(target, event)
            }
        } else {
            // 普通绑定
            fn.call(target, event)
        }
    })
}