Web前端学习JS篇之“DOM事件”

事件就是指为DOM指定的动作，包括三个部分。

事件源：比如按钮，为了获取事件源。

事件类型：比如onclick，为了注册事件（绑定事件）。

事件处理程序：为了添加事件运行的核心程序。

本次分享DOM关于事件的常见知识点

---

一、注册事件（绑定）：

1. 传统方式：onclick（）这种方式无法绑定多个，后边注册的会覆盖前边注册的。

2. 监听方式：addEventlistener()，可以按顺序执行

使用方法是：

addEventlistener(type,listener[ ,useCapture])

type:事件类型字符串，比如click,mouseover等，不带on

listener:事件处理函数，事件发生时调用

useCapture：默认是false

btn.addEventlistener('click',function(){alert("11");})

3. IE9之前的监听：attachEvent()

使用方法是：

attachEvent(eventNameWithon,callback)

此时需要使用onclick,但也是字符串

btn.attachEvent('onclick',function(){XXX})

---

二、删除事件（解绑）：

1. 传统方式：btn.onclick = null

2. 监听方式：

btn.addEventlistener('click',fn)

function fn(){

alert();

btn.removeEventlistener('click',fn);

}

3. IE9之前的监听：

attach方法类似，换成detachEvent即可

---

三、DOM事件流：

捕获阶段（从上往下传），目标阶段，冒泡阶段（从下往上传）

---

四、事件对象：

function(event)这个event就是事件对象，当作形参

事件对象是系统创建的，不需要人为传递参数

事件对象是事件相关数据的集合，比如鼠标事件Mouseevent中的鼠标坐标啊，键盘事件中的键盘按下啊

一般可以简写成function(e)

IE678使用window.event来获取

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

e.target 返回事件触发的对象（IE678使用的是e.srcElement），this返回的是事件绑定的对象，两者不一样

e.type 返回事件的类型

e.preventDefault()阻止默认行为，如链接不跳转或者提交按钮不提交(IE678使用returnValue，更简单的方式是直接return false,仅限于.onclick传统方式，而且return之后的代码都不执行)

e.stopPropagation()阻止冒泡阶段（IE678使用的是e.cancelBubble = true）

事件委托：

原理：在父节点添加事件监听器，然后利用冒泡影响子节点，可以提高效率

鼠标事件对象：MouseEvent

e.clientX,e.clientY,以可视区为基准，下拉无效

e.pageX,e.pageY,以整个页面为基准，下拉有效

e.screenX,e.screenY,以实际屏幕为基准

mouseenter和mouseover的区别

mouseover经过子盒子也会触发，也就是会冒泡

mouseenter不会冒泡

键盘事件对象：

keyup抬起触发,keydown按下触发（优先级比keypress高）,keypress按下触发但不能识别功能键

e.keyCode：按下键的ASCII码值，keypress可以区分字母的大小写

---