文章目录2. 删除事件（解绑事件） 3. DOM事件流4. 事件对象 5. 阻止事件冒泡 6. 事件委托（代理、委派）7. 常用的鼠标事件 8. 常用的键盘事件
1. 注册事件（绑定事件） 1.1. 注册事件概述
给元素添加事件 ， 称为注册事件或者绑定事件 。
注册事件有两种方式：传统方式和方法监听注册方式 。
1.2.事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
.()方法将指定的监听器注册到 （目标对象）上 ， 当该对象触发指定的事件时，就会执行事件处理函数 。
>var btns = document.querySelectorAll('button');// 1. 传统方式注册事件btns[0].onclick = function () {alert('hi');}btns[0].onclick = function () {// 弹出的是这个，后面会将前面覆盖掉alert('good');}// 2. addEventListener 事件监听方式btns[1].addEventListener('click', function () {alert(11);})btns[1].addEventListener('click', function () {alert(22);})
1.3.事件监听方式（了解）
eventTarget.attachEvent(eventNameWithOn, callback)
.()方法将指定的监听器注册到（目标对象） 上，当该对象触发指定的事件时 ， 指定的回调函数就会被执行 。
// 3. attachEvent ie9以前的版本支持btns[2].attachEvent('onclick', function () {alert(nope);})
1.4. 注册事件兼容性解决方案
兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器 。
function addEventListener(element, eventName, fn) {// 判断当前浏览器是否支持 addEventListener 方法if (element.addEventListener) {element.addEventListener(eventName, fn); // 第三个参数 默认是false} else if (element.attachEvent) {element.attachEvent('on' + eventName, fn);} else {// 相当于 element.onclick = fn;element['on' + eventName] = fn;}
2. 删除事件（解绑事件） 2.1. 删除事件的方式 传统注册事件
eventTarget.onclick = null;
方法监听注册方式
① eventTarget.removeEventListener(type, listener[, useCapture]);② eventTarget.detachEvent(eventNameWithOn, callback);
// 删除事件btns[3].onclick = function () {alert('33');// 1. 传统方式删除事件btns[3].onclick = null;}// 2. removeEventListener 删除事件btns[4].addEventListener('click', fn) // 里面的fn 不需要调用加小括号function fn() {alert(44);btns[4].removeEventListener('click', fn);}
2.2. 删除事件兼容性解决方案
function removeEventListener(element, eventName, fn) {// 判断当前浏览器是否支持 removeEventListener 方法if (element.removeEventListener) {element.removeEventListener(eventName, fn); // 第三个参数 默认是false} else if (element.detachEvent) {element.detachEvent('on' + eventName, fn);} else {element['on' + eventName] = null;}
3. DOM事件流4. 事件对象 4.1. 什么是事件对象
eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event) {}）// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
比如：
1. 谁绑定了这个事件 。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置 。
文章插图