事件绑定
事件绑定
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) } }) }