IE8仅支持冒泡阶段的attachEvent

canlynet

浏览: 691989 次
性别:
来自: 北京

最近访客更多访客>>

hellotianty

conan1986

Scorpio117

18802218523

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

注意: 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”执行结果为：