目标

1. 能够写出元素注册事件的两种方式
2. 能够说出删除事件的两种方式
3. 能够说出DOM事件流的三个阶段
4. 能够利用事件对象完成跟随鼠标案例
5. 能够封装阻止冒泡的兼容性函数
6. 能够说出事件委托的原理
7. 能够说出常用的鼠标和键盘事件

注册事件（绑定事件）

1. 传统方式

• 利用on开头的事件 onclick
• <buttong onclick='alert("hi~")/>
• 特点: 注册事件的
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

2. 监听注册方式

• W3C标准推荐方式
• addEventListener()它是一个方法
• IE9之前的IE不支持此方法， 可使用attachEvent()代替
• 特点：同一个元素同一个事件可以注册多个监听器
• 按注册顺序依次进行

eventTarget.addEventListener(type, listener,[, useCapture]);

1. type: 事件类型字符串， 比如click, mouseover, 注意这里不要带on
2. listener: 事件处理函数，事件发生时， 会调用流监听函数
3. useCapture:可选参数，默认是false.

删除事件（解绑事件）

1. 传统注册方式
   eventTarget.onclick = null
2. 方法监听注册方式
   `eventTarget.removeEventListener(type, listener[, useCapture])
3. 兼容性解决方案

function removeEventListener(element, eventName, fn){
if( element.removeEventListener){
  element.removeEventListener(eventName, fn); //第三个参数，默认是false
} else if( element.detachEvent) {
  elment.detachEvent('on'+eventNAme, fn);
} else {
  element['on'+eventName] = null;
}

DOM事件流

描述的是从页面中接收时间的顺序
事件发生在元素节点之间按照特定的顺序传播，这个即
DOM事件流分为三个阶段

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
   注意：

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段
2. onclick 和attachEvent只能得到冒泡阶段
3. addEventListener(type, listener[, useCapture]) 第三个参数如果是true, 表示事件捕获阶段调用事件处理程序；如果是false(不写默认是false), 表示事件冒泡阶段调用事件处理程序
4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
5. 有些事件是没有冒泡的，比如onblur, confocus, onmouseenter, onmouseleave

事件对象

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click', function(event){})
//这个event就是事件对象，我们还喜欢写成e或者evt

• event对象代表事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态
• 事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里，这个对象就是事件对象event, 它有很多属性和方法
  比如：

1. 谁绑定了这个事件
2. 鼠标触发事件的话，会得到鼠标相关信息，如鼠标位置
3. 键盘触发事件的话，会得到键盘相关信息，如按了哪个键

常见事件属性和方法

事件属性和方法

说明：

1. e.target返回的是触发事件的对象(元素), this返回的是绑定事件的对象
2. 阻止默认行为(事件） 让链接不跳转，或者让提交按钮不提交

var a = document.querySelector('a');
a.addEventListener('click', function(e){
  e.preventDefault();
})
//传统注册方式
a.onclick = function(e){
// 普通浏览器 e.preventDefault();
// e.preventDefault();
//低版本浏览器， ie678, returnValue 属性
//e.returnValue;
// 我们可以利用return false也能阻止默认行为， 没有兼容性问题， 特点： return后面的代码不执行了， 而且只限于传统的注册方式
return false;
}

阻止事件冒泡

标准方法: e.stopPropergation();
ie678: window.event.cancelBubbule = true;

事件委托（代理、委派）

不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点

• 作用
  我们只操作一次DOM， 提升了程序的性能
• 通过e.target可以得到我们点击的对象
  eg . e.target.style.backgroundColor = 'pink'

常用的鼠标事件

常用的鼠标事件

1. 禁止鼠标右键菜单
   contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e){
   e.preventDefault();
};

2. 禁止鼠标选中(selectstart 开始选中)

document.addEventListener('selectstart', function(e){
   e.preventDefault();
};

鼠标事件对象

Event又分为不同Event,现阶段我们主要使用 鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent

MouseEvent
image.png

常用的键盘事件

image.png