注意: 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中则为: