事件冒泡和事件捕获以及事件委托

亦凉 2022-12-23 06:46 201阅读 0赞

### 事件冒泡 ###

事件冒泡触发顺序：  
div->body->html->document

<div id="box">
    	<div id="box1"></div>
    </div>

function thisName(e){ 
    console.log(this.id)
    }
    document.getElementById("box").addEventListener("click",thisName,false );
    document.getElementById("box1").addEventListener("click",thisName,false );

### 事件捕获 ###

事件捕获触发顺序：  
document->html->body->div

<div id="box">
    	<div id="box1"></div>
    </div>

function thisName(e){ 
    console.log(this.id)
    }
    document.getElementById("box").addEventListener("click",thisName,true);
    document.getElementById("box1").addEventListener("click",thisName,true);

### 事件委托 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70_pic_center][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f6e7781a9b0645f4bdbefbe299b2137f.png

发表评论取消回复

表情：

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

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

相关阅读

相关事件冒泡和事件捕获以及事件委托

事件冒泡事件冒泡触发顺序： div->body->html->document <div id="box"> <div id="box1"></

亦凉/ 2022年12月23日 06:46/ 0 赞/ 202 阅读

相关事件冒泡、事件捕获、事件委托知识点汇总

事件冒泡、事件捕获、事件委托事件冒泡：从当前触发的事件目标一级一级往上传递，依次触发，直到document为止事件捕获：从document开始触发，一级一级往

小鱼儿/ 2022年12月19日 09:29/ 0 赞/ 191 阅读

相关 js事件委托、事件冒泡和捕获

事件冒泡和捕获事件冒泡是指，事件会从最内层的元素开始发生，一直向上传播，直到document对象。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。

爱被打了一巴掌/ 2022年11月08日 11:48/ 0 赞/ 255 阅读

相关浅谈事件冒泡和事件捕获的应用场景——事件代理/事件委托

采用事件代理，为页面中的所有a标签绑定click事件。 document.addEventListener("click", function(e) { i

以你之姓@/ 2022年06月17日 04:26/ 0 赞/ 367 阅读

相关 JavaScript中事件捕获和事件冒泡以及如何阻止冒泡事件和默认事件

首先，先介绍一下事件冒泡和事件捕获。浏览器中对事件的处理机制默认为事件冒泡，例如 <div id='div1'> <div id='div2'>

叁歲伎倆/ 2022年06月10日 13:53/ 0 赞/ 438 阅读

相关 javascrpit 事件捕获和事件冒泡

事件捕获和事件冒泡涉及到了事件的流程，我们先来看一个例子：一、添加事件监听：给 window 添加点击的监听事件，输出 “别点了，受不了了“ ![偷笑][titt

小鱼儿/ 2022年05月27日 00:39/ 0 赞/ 274 阅读

相关 jsDOM获取元素方法、事件委托、事件捕获和事件冒泡

> 本篇博文解决的问题： > > 1、给父元素注册点击事件，特定子元素响应该点击事件；——2.2 事件委托 > > 2、给父元素注册点击事件，点击父元素，所有子元素响应/不

清疚/ 2022年05月23日 07:59/ 0 赞/ 606 阅读

相关 js 事件冒泡和事件捕获

一块：事件流描述的是从页面接收事件的顺序。 IE的事件是冒泡事件流，而firefox的事件流是捕获事件流。 1.事件冒泡 IE的事件流叫做事件冒泡

比眉伴天荒/ 2022年05月19日 01:12/ 0 赞/ 343 阅读

相关事件冒泡、事件捕获、DOM2事件流和事件委托、DOM事件中Event对象

由网上文章整理成，具体可以参考下面文章： [https://www.cnblogs.com/xiaohuochai/p/5859476.html][https_www.cn

妖狐艹你老母/ 2022年03月17日 18:26/ 0 赞/ 341 阅读

相关 JS事件捕获和事件冒泡

事件冒泡大家都知道的，在实际开发中也经常的接触到，然而事件捕获是个什么鬼？　　对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，...

测试账号/ 2021年01月12日 03:32/ 0 赞/ 719 阅读