1. 注册事件兼容性解决方案
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. 删除事件的方式
- 传统注册方式
eventTarget.onclick = null; - 方法监听注册方式
①eventTarget.removeEventListener(type, listener[, useCapture]);
②eventTarget.detachEvent(eventNameWithOn, callback);
3. DOM 事件流
- JS 代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick 和 attachEvent 只能得到冒泡阶段。
- addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
- 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
- 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
- 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。
4. 事件对象
事件对象的兼容性方案：
e = e || window.event;
事件对象
5. 阻止事件冒泡的兼容性解决方案
if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
5. 事件委托
事件委托也称为事件代理， 在 jQuery 里面称为事件委派。
事件委托的原理：
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。
事件委托的作用：
我们只操作了一次 DOM ，提高了程序的性能。
6. 常用的鼠标事件
鼠标事件
其他鼠标事件：
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
2.禁止鼠标选中（selectstart 开始选中）
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent
鼠标事件对象
7. 常用键盘事件
事件除了使用鼠标触发，还可以使用键盘触发， 注意给文档 document 添加键盘事件
键盘事件
注意： onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
补充： keyCode: 返回该键的ASCII值
