为了账号安全,请及时绑定邮箱和手机立即绑定

Javascript中的事件冒泡

标签:
JavaScript

这是一个基础性的文章,使用Javascript观察DOM中的事件冒泡机制,并介绍如何阻止默认行为和如何组织事件冒泡的方法。

1. 第一个例子可以在Firefox下运行

复制代码

<div id="container1" onclick="alert('click container1');">
    <div id="container2" onclick="alert('click container2');">
        <a href="http://www.google.com" target="_blank" onclick="fn1(event);">Google</a>
        <a href="http://www.google.com" target="_blank" onclick="fn2(event);">Google</a>
        <a href="http://www.google.com" target="_blank" onclick="fn3(event);">Google</a>
        <a href="http://www.google.com" target="_blank" onclick="fn4(event);">Google</a>
    </div>
</div>复制代码

 

复制代码

function fn1(event) {
    alert('click google');
}

function fn2(event) {
    alert('click google');
    event.preventDefault();
}

function fn3(event) {
    alert('click google');
    event.stopPropagation();
}

function fn4(event) {
    alert('click google');
    event.preventDefault();
    event.stopPropagation();
}复制代码

 

点击第一个链接,alert_google -> alert_container2 -> alert_container1 -> open_google_page

点击第二个链接,alert_google -> alert_container2 -> alert_container1

点击第三个链接,alert_google -> open_google_page

点击第四个链接,alert_google

 

可以看到,事件冒泡是从最初引发事件的HTML节点开始,一步步向上引发父节点的相同事件。

在Firefox中,我们可以通过 preventDefault 函数阻止默认的行为(比如这个例子中,点击链接的默认行为是打开链接地址)

通过 stopPropagation 函数阻止事件冒泡。

 

相同的过程在IE下的实现有点不同,一是事件对象(event)在IE下是作为 window 对象的一个属性,

二是阻止事件的默认行为或阻止事件冒泡的做法也有所不同,请看:

2. 观察IE下的事件冒泡

 

复制代码

<div id="container1_ie" onclick="alert('click container1');">
    <div id="container2_ie" onclick="alert('click container2');">
        <a href="http://www.google.com" target="_blank" onclick="fn1_ie();">Google</a> <a
            href="http://www.google.com" target="_blank" onclick="fn2_ie();">Google</a>
        <a href="http://www.google.com" target="_blank" onclick="fn3_ie();">Google</a> <a
            href="http://www.google.com" target="_blank" onclick="fn4_ie();">Google</a>
    </div>
</div>复制代码

 

复制代码

function fn1_ie() {
    alert('click google');
}

function fn2_ie() {
    alert('click google');
    event.returnValue = false;
}

function fn3_ie() {
    alert('click google');
    event.cancelBubble = true;
}

function fn4_ie() {
    alert('click google');
    event.returnValue = false;
    event.cancelBubble = true;
}复制代码

 

同样:

点击第一个链接,alert_google -> alert_container2 -> alert_container1 -> open_google_page

点击第二个链接,alert_google -> alert_container2 -> alert_container1

点击第三个链接,alert_google -> open_google_page

点击第四个链接,alert_google

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消