js事件传递流程与事件委托

以你之姓@ 2023-07-25 14:16 2阅读 0赞

一、js的事件传递流程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzcyMzY2_size_16_color_FFFFFF_t_70]  
**js的事件传递流程**有两个阶段第一个是**事件捕获阶段**，第二个是**事件冒泡阶段**  
**事件捕获阶段**是**从上到下**传递事件，**事件冒泡阶段**是**从下到上**传递事件。

可以使用**addEventListener**第三个参数传入true就可鉴别到**事件捕获阶段**

domObject.addEventListener(clickevent,function(),true)

默认第三个参数是false，也就监听的是**事件冒泡阶段**

禁止事件向上冒泡

event.stopPropagation()

阻止默认行为

event.preventDefault();  event.returnValue = false;  return false;

哪些默认行为要做阻止

1.  a标签链接跳转
    
      2.  Submit按钮的提交，

二、js事件委托  
js事件委托就是基于**事件冒泡传递**让**父级dom**来处理**子级dom**的**事件逻辑**。  
操控**子级dom**用得是ev.target属性

**父级dom**根据**子级dom标签名**判断对应的**子级dom事件逻辑**的例子

ul.onclick = function(e){ //e指event,事件对象
    	var target = e.target || e.srcElement; //target获取触发事件的目标(li)
    	if(target.nodeName.toLowerCase() == 'li'){ //目标(li)节点名转小写字母，不转的话是大写字母
    		alert(target.innerHTML)
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzcyMzY2_size_16_color_FFFFFF_t_70]: /images/20230528/6728c3177d1e4d3cbca66d51336412ac.png

发表评论取消回复

表情：

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

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

相关阅读

相关 js事件传递流程与事件委托

一、js的事件传递流程 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

以你之姓@/ 2023年07月25日 14:16/ 0 赞/ 3 阅读

相关 js中事件委托

`经典面试题` 一张图看懂事件委托 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

亦凉/ 2022年12月05日 13:50/ 0 赞/ 260 阅读

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

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

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

相关委托与事件

前面讲到了[委托][Link 1]，正如上篇文章所述，委托的出现标志着事件的出现。上篇文章中我们没有用到事件，但细心的读者是否发现，无论是如何使用委托，都会在People

今天药忘吃喽~/ 2022年08月07日 04:35/ 0 赞/ 256 阅读

相关 js事件委托（事件代理）

[js中的事件委托或是事件代理详解][js] 起因： 1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的； 2、其实我一直都没弄明白，写这个一是为了备忘，

「爱情、让人受尽委屈。」/ 2022年05月21日 13:30/ 0 赞/ 277 阅读

相关 js事件委托

在JavaScript中，事件委托`Event delegation`是一种事件的响应机制，当需要监听不存在的元素或是动态生成的元素时，可以考虑事件委托。事件委托得益于事件

缺乏、安全感/ 2022年05月15日 07:58/ 0 赞/ 357 阅读

相关 js的事件委托

一、什么是事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件二、为什么需要用事件委托如果要用事件委托，就会将

我会带着你远行/ 2022年03月19日 06:23/ 0 赞/ 306 阅读

相关 JS事件委托

前两天看了一篇文章讲到了事件委托，然后自己就查了一下，get到了一些知识！首先感谢之前那篇文章的大佬。[原文章位置][Link 1]，大佬写的非常透彻。令我茅塞顿开。（商

╰半夏微凉°/ 2022年02月27日 11:20/ 0 赞/ 304 阅读

相关 js原生事件委托写法，jquery事件委托写法

什么是事件委托：事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。(不理解冒泡的可以去百度下) 定义：利用事件冒泡处理动

缺乏、安全感/ 2021年09月18日 13:18/ 0 赞/ 559 阅读

相关 js 事件委托机制

事件委托利用事件冒泡(该事件必须有冒泡功能)，指定一个事件处理程序，就可以管理某一个类型的所有事件在父元素配合event.target添加样式，及可通过冒泡形式，对

深藏阁楼爱情的钟/ 2021年07月24日 18:22/ 0 赞/ 531 阅读