265节---------6月21日

事件高级

注册事件

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

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

传统注册方式

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

方法监听注册方式

addEventListener()

特点：同一个元素同一个时间可以注册多个监听器

语法为：eventTarget.addEventListener(type,listener[ ，useCapture])；

该方法将指定的监听器注册到eventTarget（目标对象上）上，当该对象触发指定的事件时，就会执行实践处理函数。

该方法接收三个参数：

• type：事件类型字符串，比如click、mouseover，注意不要带On
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认是false。

---

删除事件

传统注册方式

eventTarget.onclick = null；

方法监听注册方式

eventTarget.removeEventListener(type,listener[ useCapture])；

---

DOM事件流

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程叫做DOM事件流。

DOM事件流包括三个阶段

• 捕获阶段
• 当前目标阶段
• 冒泡阶段

事件冒泡：事件开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

注意：

• JS代码只能执行捕获或者冒泡其中的一个阶段
• onclick和attchEvent只能得到冒泡阶段
• addEventListener(type,listener[ ，useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序
• 在实际开发中，很少使用事件捕获，更关注事件冒泡
• 有些事件是没有冒泡的，比如：oblur、onfocus等

---

事件对象

事件对象的注意事项

• 事件对象写到我们侦听函数的小括号里面，当形参来看
• 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
• 事件对象是我们事件的一系列，相关数据的集合。跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，比如鼠标坐标；如果是键盘事件，里面就包含的键盘事件的信息，比如判断用户按下了哪个键
• 这个事件对象我们可以自己命名，比如event, evt, e
• 事件对象也有兼容性问题

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

e.target	返回触发事件的对象，标准
e.srcElement	返回触发事件的对象，非标准ie6-8使用
e.type	返回事件的类型比如click mouseover，不带on
e.cancelBubble	该属性阻止冒泡，非标准ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为），非标准ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为），标准比如不让链接跳转
e.stopPropagation()	阻止冒泡，标准

---

事件委托（代理、委派）

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

---

常用的鼠标事件

• anclick                    鼠标点击左键触发
• anmouseover         鼠标经过触发
• onmousequt           鼠标离开触发
• onfocus                   获得鼠标焦点触发
• anblur                      失去鼠标焦点触发
• onmousemove        鼠标移动触发
• anmouseup             鼠标弹起触发
• anmousedown         鼠标按下触发

contextmenu禁止鼠标右键菜单

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

selectstart禁止鼠标选中

documert.addEvementListener('select.start',function (e){
e.preventDefault ();
)

鼠标事件对象MouseEvent

获得鼠标在页面中的坐标

client成标在可视区的x和y坐标

• console.log(e.clientx);
• console.log(e.clientY);

page鼠标在可视的x和y坐标

• console.log(e.clientx);
• console.log(e.clientY);

screen鼠标在电脑屏幕的x和y坐标

• console.log(e.screenx);
• console.log(e.screenY);

---

常用键盘事件

常见的键盘事件

• onkeyup            某个键盘技键被松开时触发
• onkeydown        桌个键盘按键被按下时触发
• onkeypress        某个键盘按键被按下时触发，但是它不识别功能键比如ctrl shift箭头等

注意：

• 如果使用addEventListener不需要加on
• onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift等。
• 三个事件的执行顺序是：keydown-keypress--keyup

键盘事件对象

• 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
• keyup和keydown事件不区分字母大小写，a和A得到的都是65
• keypress事件区分字母大小写，a97和A得到的是65

注意：

• onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写.
• 在我们实际开发中，我们更多的使用keydowni和keyup,它能识别所有的键（包括功能键）
• Keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCI值