一、注册事件

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式。

1、传统方式

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。唯一性。

利用on开头的事件，onclick

2、方法监听注册方式    addEventListener()

IE9之前用attachEvent()代替

同一个元素同一个事件可以注册多个监听器

eventTarget.addEventListener(type, listener, useCapture)

（1）将监听器注册到eventTarget（目标对象）上

（2）type：事件类型字符串。比如click、mouseover，此处不需要加on

（3）listener：事件处理函数。事件发生时，会调用该监听函数

（4）useCapture：可选参数，是一个布尔值。如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序。

二、删除事件（解绑）

1、传统注册方式

eventTarget.onclick = null;

2、方法监听注册方式    removeEventListener()

eventTarget.removeEventListener(type, listener, useCapture)

对应的函数listener要单独写才能移除，不能使用匿名函数。

三、DOM事件流

四、事件对象

div.onclick = function(event){}

（1）events就是一个事件对象，写在监听函数的小括号里面，当作形参来看。

（2）事件对象只有有了事件才会存在，它是系统自动创建的，不需要传递参数。

（3）事件对象是事件的一系列相关数据的集合，跟事件相关。比如鼠标点击里面包含了鼠标的相关信息，鼠标坐标等，如果是键盘事件，里面就包含键盘的相关信息，比如键盘按下了哪个键。

（4）事件对象可以自定义名字

五、事件对象的常见属性和方法

e.target返回触发事件的对象，this返回绑定事件的对象

六、阻止默认行为    preventDefault()

传统注册方式

（1）可以利用 return false，也能阻止默认行为，并且没有兼容性问题，但是return后面的代码不执行，而且仅限于传统注册方式。

（2）e.preventDefault()

（3）e.returnValue

七、阻止冒泡行为    stopPropagation()

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。也即是子元素和父元素都添加事件，触发子元素事件，父元素也会跟着触发，这就是冒泡行为。

低版本IE使用：e.cancelBubble = true   阻止冒泡

八、DOM 事件委托（代理、委托）

事件委托也称之为事件代理，在jQuery里面称为事件委派。

1、事件委托的原理

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

2、事件委托的作用

只操作一次DOM，提高了程序的性能。

九、禁止选中文字、禁止右键菜单

1、禁止鼠标右键菜单    contextmenu

contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e){

        e.preventDefault(); 阻止默认行为

})

2、禁止选中文字    selectstart（开始选中）

document.addEventListener('selectstart',function(e){

        e.preventDefault(); 阻止默认行为

})

十、鼠标事件对象

event对象代表事件的状态，是事件相关的一系列信息的集合。鼠标事件对象MouseEvent，键盘事件对象KeyboardEvent。

（1）clientX、clientY鼠标在可视区的坐标，页面过长滚动下拉时，只能显示相对于可是窗口的坐标。

（2）pageX、pageY鼠标在文档页面的坐标，页面过长滚动下拉时，可以显示相对于文档页面的坐标。

十一、键盘事件对象

（1）keyup和keydown事件不区分字母大小写，大小写得到的keycode是一样的ASCII码

（2）keypress区分大小写，但是不识别功能键，比如ctrl、shift等

（3）键盘事件对象属性keyCode  返回该键的ASCII码