事件冒泡和事件捕捉的写法区别--PHP社区--YouYaX原创论坛

主页个人前端笔记事件冒泡和事件捕捉的写法区别

admin

发表于2012-11-11 18:55:49 只看楼主

楼主

头衔: 精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数: 502
金币数: 186
短消息

<body onclick="alert('body clicked');">
<div id="dv" onclick="alert('div clicked');"  style="width:100px;height:100px;
border:1px solid red">

</div>
</body>

这样先弹出div,再弹出body

<body>
<div id="dv" style="width:100px;height:100px;border:1px solid red">

</div>
<script>
    document.getElementById('dv').addEventListener('click', function () {
        alert('div clicked');
    }, false);

    document.body.addEventListener('click', function () {
        alert('body clicked');
    }, false);
</script>
</body>

以上效果一样，

而要先弹出body，后弹出div，则要把第三个参数false改成true，
捕获是从DOM tree的根向子元素传播的过程，冒泡反之由当前元素向父元素的方向进行

引用回复

操作点评

回复人
回复内容

操作管理