document 的冒泡事件与捕获事件

为什么这么写onclick 明显比addEventListener兼容好：

避免事件覆盖
jQuery中用的就是我们的DOM2级，也有轮子。jQuery事件同名不会被覆盖。

一、初识事件流

事件流：简单来讲就是触发事件完成的整个过程。“事件流”描述的是页面上各个元素监听事件的顺序。
事件流包括：

冒泡事件
捕获事件

直接上案例说明，下图。

冒泡实例.gif

这就是我们平常我们写的盒子套盒子的代码。触发从我们直接点击的盒子开始一直到属于监听内容的事件结束。
所以先后显示顺序 box3 box2 box1。这种写法属于 DOM0 级写法，无法监听捕获事件，只能监听冒泡事件。这里需要注意，在IE9、Chrome里面，事件会冒泡到window对象，而IE6、7、8仅仅冒泡到document对象。
另外，用这种方法绑定的监听，this指的是触发这个事件的元素，没有任何的浏览器兼容问题。
DOM0级还有一种写法，直接将监听写在标签里面，像行内样式一样不许用：

DOM 0级特点：

只监听冒泡
程序会覆盖

捕获事件恰好与冒泡事件显示顺序相反。首先熟悉一个新函数addEventListener add:添加 Event:事件 Listener:监听，它写的代码属于 DOM2级事件。
它接受三个参数：什么事件、函数、是否监听捕获阶段。
oBox.addEventListener("click",function(){ },false);
第1个参数：事件名不用写on， click、mouseover 、mouseout
第2个参数：函数可以是匿名函数，也可以是有名函数
第3个参数：布尔值，true表示监听捕获、false表示监听冒泡阶段,不填默认 false。
把上面「冒泡实例」的实例改成此函数，变成捕获事件，则结果显示顺序是 box1 box2 box3。
注意：addEventListener可以重复添加相同事件名的事件，不会覆盖，仍按顺序执行
虽然我们现在不理解机理，但已经掌握冒泡捕获的本质。代码会按顺序执行 先捕获后冒泡

二、原理探究

根据演示效果我们知道代码执行顺序。

代码执行规则

事件流机理.png

捕获阶段capture phase [feɪz]、冒泡阶段bubbling['bʌblɪŋ] phase

三、低版本IE的事件绑定

IE6、7、8不支持addEventListener()方法，支持
oDiv.attachEvent(“onclick”,函数);
没有第三个参数，也就是说，不能选择监听捕获、冒泡。只能监听冒泡。
box1.attachEvent("onclick", function(){alert("box1"); });
第一个参数，必须写on，和addEventListener()不一样；
第二个参数，就是事件处理函数
没有第三个参数，只能监听冒泡。所以和on***写法一样。

低版本IE的事件监听attachEvent事件处理函数里面的this，不是触发事件的这个元素，而是window对象！
box1.attachEvent("onclick", function(){
alert(this === window); //true
});

同一个事件名的多个监听，会反着执行：
box1.attachEvent("onclick", function(){
alert(1);
});
box1.attachEvent("onclick", function(){
alert(2);
});
box1.attachEvent("onclick", function(){
alert(3);
});
弹出3、2、1。

处理addEventListener 与 attachEvent
attachEvent 里面的第一个参数与 addEventListener 的写法不同，且attachEvent 没有第三个参数。

四、事件对象 event

点击结果

通用事件对象属性和方法:
● event.type 返回事件的类型，没有on，比如”click”
● event.target 返回你点击的最小的那个元素，即使这个元素身上没有监听，也是返回它
● event.currentTarget 返回自己，this一定和event.currentTarget是一个元素，都是自己
● event.bubbles 返回一个布尔值，表示这个事件是否冒泡
比如onmouesover的event.bubbles就是true;
但是onmouseenter的 event.bubbles就是false;
● stopPropagation() 停止传播事件流
event.stopPropagation();

● preventDefault() 阻止默认事件
event.preventDefault();

五、 clientX、clientY、screenX、screenY、pageX、pageY

clientX表示鼠标的位置，距离浏览器窗口左边边的距离

clientY表示鼠标的位置，距离浏览器窗口上边边的距离

screenX表示鼠标的位置，距离屏幕左边边的距离

screenY表示鼠标的位置，距离屏幕上边边的距离