1. 注册事件
image.png
事件监听方式：
1 addEventListener IE9+
eventTarget.addEventListener(type, listener[, useCapture])
*type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
*listener：事件处理函数，事件发生时，会调用该监听函数
*useCapture：可选参数，是一个布尔值，默认是 false。
2.attachEvent IE678
eventTarget.attachEvent(eventNameWithOn, callback)
*eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
*callback： 事件处理函数，当目标触发事件时回调函数被调用
3.兼容性解决方案
直接使用传统注册方式：如：btn.onclick = function(){};
或
自定义方法
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. 删除事件
1.传统方式
eventTarget.onclick = null;
2. 方法监听注册方式
① eventTarget.removeEventListener(type, listener[, useCapture]);
② eventTarget.detachEvent(eventNameWithOn, callback);
3. 删除事件兼容性解决方案
使用传统方式 eventTarget.onclick = null;
或
自定义方法
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. 事件对象
3.1事件对象使用语法
eventTarget.onclick = function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}）
注意：
在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
兼容性解决方案：
解决:
e = e || window.event;
3.2 事件对象的常见属性和方法
e.target 和 this 的区别：
this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
e.target 是事件触发的元素。
image.png
4. 阻止事件冒泡
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。
阻止事件冒泡写法：
IE9+(标准写法)
.e.stopPropagation()
IE 6-8(非标准写法)
e.cancelBubble = true;
阻止事件冒泡的兼容性解决方案:
if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
5. 事件委托
事件委托的原理：
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
案例：
给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。
6. 常用的鼠标事件
6.1 常用的鼠标事件
image.png
1.禁止鼠标右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
2.禁止鼠标选中（selectstart 开始选中）
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
6.2 鼠标事件对象
image.png
7.常用的键盘事件
7.1 常用键盘事件
image.png
注意： onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
7.2 键盘事件对象
image.png
注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写
image.png