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

代码下载

转载于:https://www.cnblogs.com/sanshi/archive/2009/02/18/1393165.html

Javascript中的事件冒泡相关推荐

javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
【前端学习】前端学习第十五天：JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
jQuery 中的事件冒泡和阻止默认行为
jQuery 中的事件冒泡和阻止默认行为参考资料: <锋利的jQuery> 作者:单东林张晓菲魏然出版社: 人民邮电出版社 1.事件冒泡 [javascript] vi ...
12.在JavaScript中的事件模型如何理解?
一.事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件.鼠标事件.自定义事件等由于DOM是一个树结构,如果在 ...
浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式方式1:直接在html元素上注册<body onLoad="ready()"></body > ...
jQuery中的事件冒泡捕获阻止冒泡
jQuery中的事件冒泡捕获阻止冒泡事件冒泡 IE中的事件流叫做事件冒泡,就是又最开始的时间接收到逐级向上传播较为不具体的节点.IE9.谷歌浏览器.Safari.Opera等等都是将事件一直冒泡到w ...
Javascript中的事件捕获、事件冒泡与事件委托
看以下简单的三层div结构. <div id="grandparent"><div id="parent"><div id=&qu ...

Javascript中的事件冒泡

Javascript中的事件冒泡相关推荐

最新文章

热门文章