javascript——事件捕获冒泡

事件冒泡:obj.addEventListener(eventType ,fn ,false);

false => 冒泡(出来)

事件捕获:obj.addEventListener(eventType ,fn ,true);

true => 捕获(进去)

HTML部分:

<div id="div1">
div1
    <div id="div2">
    div2
        <div id="div3">div3</div>
    </div>
</div>

CSS部分:

div {padding: 50px;}
#div1 {border: 1px solid red;}
#div2 {border: 1px solid blue;}
#div3 {border: 1px solid green; position: absolute; top: 300px;}

JS部分:

window.onload = function(){

        var oDiv1 = document.getElementById(‘div1‘);
        var oDiv2 = document.getElementById(‘div2‘);
        var oDiv3 = document.getElementById(‘div3‘);

        function fn1(){
            alert(this.id);
        }

        /*oDiv1.onclick = fn1;
        oDiv2.onclick = fn1;
        oDiv3.onclick = fn1;*/

        //false = 冒泡
        //告诉div,如果有一个出去的事件触发了你,你就去执行fn1这个函数
        /*oDiv1.addEventListener(‘click‘ ,fn1 ,false);
        oDiv2.addEventListener(‘click‘ ,fn1 ,false);
        oDiv3.addEventListener(‘click‘ ,fn1 ,false);    //div3->div2->div1*/

        //true = 捕获
        //告诉div,如果有一个进去的事件触发了你,你就去执行fn1这个函数
        /*oDiv1.addEventListener(‘click‘ ,fn1 ,true);
        oDiv2.addEventListener(‘click‘ ,fn1 ,true);
        oDiv3.addEventListener(‘click‘ ,fn1 ,true);        //div1->div2->div3*/

        //当点击div1时,弹出1;(div1冒泡)
        //当点击div2时,弹出2、1;(div2捕获->div1冒泡)
        //当点击div3时,弹出2、3、1;(div2捕获->div3冒泡->div1冒泡)
        oDiv1.addEventListener(‘click‘ ,function(){
            alert(1);
        } ,false);

        oDiv2.addEventListener(‘click‘ ,function(){
            alert(2);
        } ,true);

        oDiv3.addEventListener(‘click‘ ,function(){
            alert(3);
        } ,false);

    };
时间: 2024-09-27 12:13:37

javascript——事件捕获冒泡的相关文章

javascript -- 事件捕获,事件冒泡

使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会有事件冒泡,又有捕获呢?应为当初IE浏览器和Natscape浏览器分别对自己浏览器的事件采用了不同的发生机制,IE浏览器采用了冒泡型:定义有相同事件的嵌套元素,当事件被触发时,子元素拥有优先权,即从里向外发生,像水里的泡泡一样从里向外冒.而Netscape采用了相反的做法,即捕获型,父元素拥有优先权

浅析JavaScript事件流——冒泡

一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传令兵接到士官战事信息,打出旗语,百米之外的第二个传令兵看到后打出同样的旗语,第三个,第四个....,直到信息传到诸葛亮手中.用专业术语解释就是:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直

JavaScript 事件的冒泡问题

事件冒泡主要是指: 多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了则外面元素的事件也会依层触发 阻止事件冒泡 的主要方法 window.event.cancelBubble() 火狐不支持,IE.谷歌支持 onclick=function (e) { console.log(this.id); //阻止事件冒泡 e.stopPropagation(); // 火狐,谷歌支持,IE8不支持 }; 事件主要的三个阶段: 1.事件的捕获阶段 从外往内 2.事件的目标阶

javascript事件捕获与冒泡

对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrome,safari这类所谓的标准浏览器中,事件传播还有个阶段,那就是捕获阶段,这个很少 有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目. 事实上,捕获阶段是一个和冒泡阶段完全相反的过程,即事件由祖先元素向子元素传播,和一个石子儿从水

javascript事件捕获机制,dom tree

$(document,"a").on("click",function(){alert(2);return false;}); $("<a>zdfsdafasdfsdfasdfsadf</a>").appendTo("body") 事件从document开始级级向下搜,每次都是,所以这个事件会捕获到所有匹配的dom元素

【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)--转

前言 javascript事件基础 事件捕获/冒泡 事件对象 事件模拟 移动端响应速度 PC与移动端鼠标事件差异 touch与click响应速度问题 结论 zepto事件机制 注册/注销事件 zepto模拟tap事件 tap事件的问题一览 点透问题 fastclick思想提升点击响应 实现原理 鬼点击 ios与android鼠标事件差异 事件捕获解决鬼点击 结语 前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜

看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序

最近一个项目基于3维skyline平台,进行javascript二次开发.对skyline事件的设计真是无语至极,不堪折磨啊!抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素

JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: JavaScript版本: DOM0事件不支持委托链 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="C

JavaScript——事件流(事件冒泡和事件捕获)

1.事件流 当浏览器发展到第4代时,浏览器开发团队遇到了一个问题:页面中的哪个元素会拥有某个特定的事件?当你单击某个按钮时,显然该单击事件并不仅仅发生在按钮上,它还发生在按钮的所有祖先元素上,比如按钮的容器元素,容器元素的父元素,甚至整个页面document.但是,哪个元素最先接收到该事件呢?页面接收事件的顺序又是怎样的呢?由此引出了事件流的概念.事件流描述的就是从页面中接收事件的顺序. 2.两个模型 Netscape和Microsoft给出了两个不同的结论.Netscape说document会