DOM中事件流三个阶段的代码验证(javascript)

逃离我推掉我的手 2022-12-06 15:48 87阅读 0赞

## dom 事件流 三个阶段 ##

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
    2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
    3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  
    4. document -> html -> body -> father -> son

代码(javascript)

var father=document.querySelector(".father");
            var son=document.querySelector('.son');
            son.addEventListener("click",function(){ 
                alert("son");
            },true);
            father.addEventListener("click",function(){ 
                alert("father")
            },true);

运行的时候

> 先弹father 然后是 son符合 document -> html -> body -> father -> son

冒泡阶段 如果addEventListener 第三个参数是 false 那么则处于冒泡阶段

> son -> father ->body -> html -> document

代码(javascript)

var father=document.querySelector(".father");
    var son=document.querySelector('.son');
    son.addEventListener("click",function(){
        alert("son");
    },false);
    father.addEventListener("click",function(){
        alert("father")
    },false);

> 先弹son 然后是father 符合son -> father ->body -> html -> document

发表评论取消回复

表情：

评论列表（有 0 条评论，87人围观）

还没有评论，来说两句吧...

相关阅读

相关探索JavaScript事件流：DOM中的神奇旅程

W3C DOM3级事件进一步扩展了事件的类型和属性，引入了更多的事件类型和特性，以满足不断增长的前端开发需求。DOM3级事件规范定义了新的事件类型，如滚动事件、触摸事件、...

傷城~/ 2024年04月25日 20:14/ 0 赞/ 11 阅读

相关 DOM事件流

OM事件流所描述的就是从页面中接受事件的顺序，有三个阶段事件捕获阶段（Capture Phase）事件的第一个阶段是捕获阶段。事件从文档的根节点出发，随着 D...

Myth丶恋晨/ 2024年04月19日 10:37/ 0 赞/ 16 阅读

相关 DOM事件流和 event的三个阶段（冒泡，捕捉，目标）详解（二）实验部分（精华）

背景承接上一篇理论部分，现在我要对理论进行验证，只有动手试验过才能真正理解。 parent.addEventListener('click', funct...

淡淡的烟草味﹌/ 2024年04月17日 05:41/ 0 赞/ 5 阅读

相关 DOM事件流和 event的三个阶段（冒泡，捕捉，目标）详解（一）理论部分（精华）

文章目录 * * 一、eventflow 事件流大图 * 二、基本概念 * * 2.1 event target 和 curren...

落日映苍穹つ/ 2024年04月17日 05:33/ 0 赞/ 6 阅读

相关 JavaScript（DOM）事件流--事件捕获、事件冒泡、阻止事件冒泡

DOM事件流事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。 DOM事件流分为3个阶段：捕获阶段

阳光穿透心脏的1/2处/ 2022年12月23日 15:23/ 0 赞/ 254 阅读

相关 DOM中事件流三个阶段的代码验证(javascript)

dom 事件流三个阶段 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。 2. onclick 和 attachEvent（ie）只能得到冒泡阶

逃离我推掉我的手/ 2022年12月06日 15:48/ 0 赞/ 88 阅读

相关 JavaScript DOM事件流事件捕获事件冒泡

事件在讲事件流之前，我们先来了解一下事件。 JavaScript与HTML之间的交互是通过事件来实现的。事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。我们可以

╰+哭是因爲堅強的太久メ/ 2022年12月04日 01:09/ 0 赞/ 184 阅读

相关摘自：javascript的理解DOM事件流的三个阶段

理解DOM事件流的三个阶段当浏览器发展到第四代时（IE4 及 Netscape Communicator 4），浏览器开发团队遇到了一个很有意思的问题

约定不等于承诺〃/ 2022年09月24日 04:20/ 0 赞/ 111 阅读

相关理解DOM事件流的三个阶段

起因在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用`onclick`来绑定个点击事件。在寒假深入学习JavaScript时，愈发觉得自己对DOM事件了解不够

墨蓝/ 2022年09月23日 15:54/ 0 赞/ 144 阅读

相关 js事件的三个阶段

![这里写图片描述][SouthEast] 事件的三个阶段：捕获，目标，冒泡。捕获阶段：从外到内，监听中设置为true,子类事件不产生目标阶段：点击的目标冒

亦凉/ 2022年06月17日 00:23/ 0 赞/ 163 阅读