web开发学习总结之js事件流详解

1 事件流原理

当你单击了某个元素，单击事件不仅仅发生在这个元素上，你也单击了它的父元素、父元素的父元素、……它的祖先元素，甚至单击了整个页面。

“事件流”描述的是页面上各个元素接收事件的顺序。
我们为了描述事件的传播顺序，特意人为规定了两个阶段：捕获阶段capture pahse、冒泡阶段bubbling phase。点击页面上的一个元素，事件在哪个阶段触发，这取决于添加事件监听的方法。

2 事件绑定

2.1 DOM0级事件绑定

DOM分为级别，DOM0级、1级、2级、3级，是不同的标准，标准一直在升级。
DOM0级事件绑定有两种方式。
第一种：是**把onclick当做属性添加给了oDiv元素。这种事件添加方法，只能监听冒泡过程。**事件的捕获阶段，没有监听成功。

oDiv.onclick = function(){
	// this 表示触发这个事件的元素
}

第二种是直接在标签里面写，工作中不使用。

<div id="box1" onclick="alert('我是box1');"></div>

用DOM0级添加事件监听，同一个元素只能有一个事件监听，若多写了几次事件监听以后写的为准。

2.2 DOM2级事件绑定

DOM1级规范中，没有对事件进行改动。
DOM2级做了新的规范，不用on***来绑定监听了，而是使用addEventListener()来绑定。
注意：若捕获阶段、冒泡阶段都想监听，得绑定两次，一次第三个参数写true，一次第三个参数写false。

//它接受三个参数：什么事件、函数、是否监听捕获阶段。
// 第1个参数：事件名不用写on，  click、mouseover 、mouseout
// 第2个参数：函数可以是匿名函数，也可以是有名函数
// 第3个参数：布尔值，true表示监听捕获阶段、false表示监听冒泡阶段
oBox.addEventListener("click",function(){
	// this 表示触发这个事件的元素
},false);

3 事件对象

任何的事件处理函数，我们的浏览器、JS引擎会默认往里面传一个实参，就是事件对象。
通常用形参event来接收：

oDiv.onclick = function(event) {
	console.log(event);
}

所有这次事件的细节，都被封装到了这个event对象里面。
比如clientX、clientY就是这次点击的位置。

3.1 通用事件对象属性和方法

• event.type 返回事件的类型，没有on， 比如”click” event.target
• 返回你点击的最小的那个元素，即使这个元素身上没有监听，也是返回它
• event.currentTarget 返回自己，this一定和event.currentTarget是一个元素，都是自己
• event.bubbles 返回一个布尔值，表示这个事件是否冒泡；onmouseover冒泡，onmouseenter不冒泡
• stopPropagation() 停止传播事件流
• preventDefault() 阻止默认事件

3.2 clientX、clientY、screenX、screenY

全线兼容，表示事件触发这一瞬间的鼠标位置。

• event.clientX 表示鼠标的位置，距离浏览器窗口左边边的距离
• event.clientY 表示鼠标的位置，距离浏览器窗口上边边的距离
• event.screenX 表示鼠标的位置，距离屏幕左边边的距离
• event.screenY 表示鼠标的位置，距离屏幕上边边的距离
  

3.3 IE中的event

IE浏览器的event对象是window对象的属性，而不是事件的实参。