事件

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