注意: attachEvent仅支持IE(edge也不支持),在IE8中,先绑定的后执行,但在IE9以及后续版本中,先绑定的先执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js测试</title>
</head>
<body>
<div id="outer">
外层DIV
<div id="inner">内层DIV</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
/**
* addEventListener 为Dom元素绑定事件
* 参数1:事件名称(以on开头)
* 参数2:事件执行的函数
* 说明:
* DOM2级事件规定的事件流包括三个阶段。
* 第一个阶段是事件捕获阶段,从外往内传递;
* 第二个阶段是处于目标阶段,这个阶段中参数3设置false或true都一样,按照绑定先后顺序执行。
* 第三个阶段是冒泡阶段,从内往外传递。
* 注意:
* IE8以及早期版本只支持事件冒泡。IE8中attachEvent先绑定的后执行,IE9以及更新版中先绑定的先执行。
* 以下的注释都针对点击一次“内层DIV”
*/
outer.attachEvent('onclick', function(event){
console.log('outer clicked! 004'); // 最后执行,因为最先绑定且为最外层
});
outer.attachEvent('onclick', function(event){
console.log('outer clicked! 003'); // 第三执行,因为最外层第二个绑定
});
inner.attachEvent('onclick', function(event){
console.log('inner clicked! 002'); // 第2执行,因为目标元素而且倒数第二绑定
});
inner.attachEvent('onclick', function(event){
console.log('inner clicked! 001'); // 第1执行,因为是目标,且最后绑定
});
</script>
</body>
</html>
点击“内层DIV”执行结果为:
IE9中则为: