为什么这么写onclick 明显比addEventListener兼容好：
- 避免事件覆盖
jQuery中用的就是我们的DOM2级，也有轮子。jQuery事件同名不会被覆盖。
一、初识事件流
事件流：简单来讲就是触发事件完成的整个过程。“事件流”描述的是页面上各个元素监听事件的顺序。
事件流包括：
- 冒泡事件
- 捕获事件
直接上案例说明，下图。
冒泡实例.gif
这就是我们平常我们写的盒子套盒子的代码。触发从我们直接点击的盒子开始一直到属于监听内容的事件结束。
所以先后显示顺序 box3 box2 box1。这种写法属于 DOM0 级写法，无法监听捕获事件，只能监听冒泡事件。这里需要注意，在IE9、Chrome里面，事件会冒泡到window对象，而IE6、7、8仅仅冒泡到document对象。
另外，用这种方法绑定的监听，this指的是触发这个事件的元素，没有任何的浏览器兼容问题。
DOM0级还有一种写法，直接将监听写在标签里面，像行内样式一样不许用：
<div id="box1" onclick="alert('我是box1');">
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 没有第三个参数。
<script >
//绑定事件，三个参数。
//第一个参数，需要绑定事件的元素
//第二个参数，事件名，没有on
//第三个参数，事件处理函数
function addEvent(obj,eventtype,fn){
if(obj.addEventListener){
obj.addEventListener(eventtype,fn,false);
}else if(obj.attachEvent){
obj.attachEvent("on" + eventtype,function(){
fn.call(obj);
});
}else{
obj["on" + eventtype] = fn;
}
}
var oDiv = document.getElementsByTagName("div")[0];
addEvent(oDiv,"click",function(){
this.style.backgroundColor = "red";
});
</script>
四、事件对象 event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
div {
height: 200px;
width: 200px;
background-color: #333;
}
</style>
</head>
<body>
<div id = "box"><div></div></div>
<script>
var odiv = document.getElementById("box");
odiv.onclick = function(event){
console.log(event.clientX,event.clientY);
console.log(event.type);
console.log(event.target);
console.log(event.currentTarget);
console.log(event.bubbles);
}
</script>
</body>
</html>
点击结果
通用事件对象属性和方法:
● 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表示鼠标的位置，距离屏幕上边边的距离
网友评论