addEventListener()、attachEvent()和removeEventListener()、detachEvent()的差别？

addEventListener()和attachEvent()的差别？

addEventListener：在HTML元素上绑定事件，FF、chrome、opera、safari及IE9浏览器以上的支持
attachEvent:在HTML元素上绑定事件。仅仅有IE浏览器支持

attachEvent语法：

element.attachEvent(event, function)
event:事件名。注意要使用“on”前缀，如 onclick
function:指定事件触发时运行的函数
var outerDiv = document.getElementById("outerDiv");
outerDiv.attachEvent("onclick", outerFn);

element.addEventListener(event, function, useCapture)
event:事件名，注意不使用“on”前缀。如 click
function:指定事件触发时运行的函数
useCapture:指定事件是否在捕获或冒泡阶段运行。

true:在捕获阶段运行

false:在冒泡阶段进行。默认值为false;

var outerDiv = document.getElementById("outerDiv");
outerDiv.addEventListener("click", outerFn, true);

我们来理解一下addEventListener的第三个參数useCapture，这个參数是可选的。

首先我们先定义一个HTML

.container {
width:100px;
height:100px;
color:#fff;
text-align:center;
font:bold 20px/100px "微软雅黑";
background-color: #c60;
cursor:pointer;
}

<div id="outerDiv" class="container">
<div id="innerDiv" class="container" >请点我</div>
</div>

我们先将addEventListener的第三个參数设置默认的false:

var console = console || {log: function( p ){ alert(p)}};
function outerFn(event) {
console.log("outerDiv Event");
}

function innerFn(event) {
console.log("innerDiv Event");
}

var outerDiv = document.getElementById("outerDiv");
if ( document.addEventListener ) {
outerDiv.addEventListener("click", outerFn, false);
} else {
outerDiv.attachEvent("onclick", outerFn);
}

var innerDiv = document.getElementById("innerDiv");
if ( document.addEventListener ) {
innerDiv.addEventListener("click", innerFn, true);
} else {
innerDiv.attachEvent("onclick", innerFn);
}

运行结果：

useCapture为false的意思是运行的是冒泡阶段，所以打印的效果是

我们先将addEventListener的第三个參数设置默认的true:

var console = console || {log: function( p ){ alert(p)}};
function outerFn(event) {
console.log("outerDiv Event");
}

function innerFn(event) {
console.log("innerDiv Event");
}

var outerDiv = document.getElementById("outerDiv");
if ( document.addEventListener ) {
outerDiv.addEventListener("click", outerFn, true);
} else {
outerDiv.attachEvent("onclick", outerFn);
}

var innerDiv = document.getElementById("innerDiv");
if ( document.addEventListener ) {
innerDiv.addEventListener("click", innerFn, true);
} else {
innerDiv.attachEvent("onclick", innerFn);
}

运行结果：

useCapture为true的意思是运行的是捕获阶段，所以打印的效果是

addEventListener事件有捕获阶段或冒泡阶段，那attachEvent事件？ attachEvent仅仅有冒泡阶段、通过IE浏览器打印结果看

先弹出一个innerDiv对话框

再弹出还有一个outerDiv对话框

普通情况下我们不希望出现冒泡或捕获,当点击div.innerDiv元素时不须要触发div.outerDiv事件，怎么办呢？接下来我们能够看以下这二个属性：

event.stopPropagation(); 支持FF=> 停止传播

event.cancelBubble = true; 支持IE => 取消冒泡

var console = console || {log: function( p ){ alert(p)}};
function outerFn(event) {
console.log("outerDiv Event");
}

function innerFn(event) {
console.log("innerDiv Event");
if ( event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = false;
}
}

var outerDiv = document.getElementById("outerDiv");
if ( document.addEventListener ) {
outerDiv.addEventListener("click", outerFn, false);
} else {
outerDiv.attachEvent("onclick", outerFn);
}

var innerDiv = document.getElementById("innerDiv");
if ( document.addEventListener ) {
innerDiv.addEventListener("click", innerFn, true);
} else {
innerDiv.attachEvent("onclick", innerFn);
}

removeEventListener()和detachEvent()的差别？

removeEventListener：在HTML元素上移出绑定事件，FF、chrome、opera、safari及IE9浏览器以上的支持detachEvent:在HTML元素上移出绑定事件，仅仅有IE浏览器支持

detachEvent定、语法：element.detachEvent(event, function)event:事件名，注意要使用“on”前缀。如 onclickfunction:指定事件触发时运行的函数removeEventListener语法：element.removeEventListene(event, function, useCapture)event:事件名，注意不使用“on”前缀，如 clickfunction:指定事件触发时运行的函数useCapture:指定事件是否在捕获或冒泡阶段运行。true:在捕获阶段运行false:在冒泡阶段进行。默认值为false;

假设加入时用的捕获阶段。那么在移除时也要用捕获阶段。否则无法移除它们。

假设是同一个元素同一个调用函数同一个useCapture值绑定多次，在移除时仅仅须要运行一次移除。

注意: 假设加入两次事件句柄，一次在捕获阶段。一次在冒泡阶段。你必须单独移除该事件。

假如在div.outerDiv上绑定二次，一次是冒泡、一次是捕获试，在移除绑定时也要移除二次，一次是冒泡。一次是捕获

 var console = console || {log: function( p ){ alert(p)}};function outerFn(event) {console.log("outerDiv Event");}function innerFn(event) {console.log("innerDiv Event");if ( event.stopPropagation ) {event.stopPropagation();} else {event.cancelBubble = true;}}var outerDiv = document.getElementById("outerDiv");//绑定一次 冒泡方式if ( document.addEventListener ) {outerDiv.addEventListener("click", outerFn, false);} else {outerDiv.attachEvent("onclick", outerFn);}// 绑定二次 捕获方式if ( document.addEventListener ) {outerDiv.addEventListener("click", outerFn, true);} else {outerDiv.attachEvent("onclick", outerFn);}//移除绑定一次 冒泡方式if ( document.addEventListener ) {outerDiv.removeEventListener("click", outerFn, false);} else {outerDiv.detachEvent("onclick", outerFn);}// 移除绑定二次 捕获方式if ( document.addEventListener ) {outerDiv.removeEventListener("click", outerFn, true);} else {outerDiv.detachEvent("onclick", outerFn);}