主页 个人前端笔记 事件冒泡和事件捕捉的写法区别
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的根向子元素传播的过程,冒泡反之由当前元素向父元素的方向进行

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理