注册事件
给元素添加事件 就称为注册事件或者绑定事件
注册事件有两种 ： 传统方式 和 方法监听注册方式
传统注册事件
特点 ： 注册事件的唯一性
也就是说 ，同一个元素的同一个事件只能设置一个处理函数，最后 注册的处理函数将会覆盖前面注册的处理函数
方法监听注册事件 addEventListener
特点 ：
-
可以给同一个元素的同一个事件添加多个处理函数，会按顺序依次执行
-
里面的事件类型是字符串,必定加引号,且不带on
这个都会显示，按顺序
ie9之前 attachEvent
删除事件
传统方式
方法监听方式
removeEventListener('类型',哪个函数)
ie9之前 deachEvent
DOM事件流
事件流 是指 从页面中接收事件的顺序
或者说 ： 事件发生的时候会在元素节点之间按照特定的顺序传播，那么这个传播过程就是DOM事件流
DOM事件流分3阶段：
1、捕获阶段 （从外往里）
2、当前目标阶段
3、冒泡阶段 （从里往外）
冒泡阶段
是先 触发里面的再一层一层触发外面的
根据第三个参数进行设置，若是false 则是冒泡
捕获阶段
第三个参数是 true ，则是捕获
是先触发外层再向里走
注意点
1、js代码中 只能执行捕获或者冒泡其中的一个阶段
2、onclick 和 attachEvent 只能得到冒泡阶段
3、实际开发中 很少使用捕获,更关注冒泡
4、有些事件没有冒泡 onfocus onblur onmouseenter onmouseleave
5、事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事情
事件对象
1、event 就是一个事件对象,写到函数的小括号里面 当形参来看
2、事件对象只有 有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
3、事件对象 里面是我们事件的一系列相关数据的集合 ,跟事件相关的
4、这个事件对象我们自己也可以命名 eg evt e...
5、事件对象也有兼容性问题,ie9之前 只能通过 window.event来获取
e.target
返回的是 触发事件的对象;就是谁触发了点击事件返回谁
这个是给ul绑定点击事件，但在页面中点击li ，e.target返回的是点击谁就返回谁
e.target 和 this的区别
e.target 返回的是 触发事件的对象;就是谁触发了点击事件返回谁
this 返回的是 绑定事件的对象 ; 就是谁绑定了点击事件返回谁
e.type 返回事件类型
阻止默认事件
标准写法 e.preventDefault()
是个方法
传统注册方式
阻止事件冒泡
普通版本 e.stopPropagation()
是个方法
ie9之前 cancelBubble
事件委托（代理、委派）
ul里面有很多个li ，那么想给每一个li都注册一个事件，那么这样访问的DOM次数会很多，会延长整个页面的交互时间
事件委托原理 ： 就是 不是给每一个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置的每一个子节点
案例 ： 在ul中，给ul设置点击事件，那么利用e.target就可以找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器
好处 ： 只操作了一次DOM ，提高了程序的性能
过程 ：
1、有一个 ul ，里面有3个li
2、给ul添加点击事件
3、利用排他思想，点击每一个li后，先循环，把所有li的背景颜色删去
4、再设置背景颜色
完整版代码
常用的鼠标事件
鼠标事件对象 ： mouseEvent
禁止显示鼠标右键菜单 contextmenu
禁止选中文字 selectstart
鼠标事件对象
client 鼠标在可视区的坐标
page 鼠标在页面文档中的坐标
screen 鼠标在电脑屏幕中的坐标
常用的键盘事件
keyup 键盘弹起
keydown 键盘按下
keypress 键盘按钮
keypress和keydown 的区别是 ： keypress无法识别功能键 eg:ctrl等
注意
1、若使用 addEventListener 则不需要加on
2、三个执行顺序是 keydown（按下） -> keypress（按下） -> keyup（弹起）
3、keypress 不识别功能键
键盘事件对象
keyCode 返回ASCII
不过，keyCode 在 keypress 中区分大小写，但在keyup和keydown中不区分大小写
