#Javascript# 事件的传播机制

Maxiye 发布于2019-08-26 18:27 / 1456人阅读

摘要：当前元素的某个事件行为被触发，它所有的祖先元素，相关的事件行为也会被依次触发，顺序是从内向外。如果祖先元素的这个行为绑定了方法，绑定的方法也会被触发执行，我们把事件的这种传播机制叫做冒泡传播这个传播机制是所有浏览器的传播机制。


    

document.body.onclick = function(){
console.log("body");
}
outer.onclick = function(){
console.log("outer");
}

inner.onclick = function(){
console.log("inner");// inner  outer  body
}

事件传播有三个阶段（捕获--目标--冒泡）
Event.prototype
0: none 默认值，不代表任何的意思
1：capturing_phase:捕获阶段
2：at_target:目标阶段（当前事件源）
3：bubbling_phase:冒泡阶段

三个阶段处理的事情
点击inner，触发了inner的click事件
浏览器在执行inner的click绑定的方法之前
1.从整个页面document开始向内查找，把inner的祖先元素遍历一遍（为冒泡阶段的传播途径做准备）
2.接下来找到目标阶段找到当前事件源。把事件源上绑定的方法执行（没绑定方法就不执行了）
3.不仅触发了当前事件源的点击行为，而且浏览器会按照第一个阶段规划的传播路径，从内向外（inner -> outer->body->html->document）把祖先元素的click行为依次触发。

当前元素的某个事件行为被触发，它所有的祖先元素，相关的事件行为也会被依次触发，顺序是从内向外。如果祖先元素的这个行为绑定了方法，绑定的方法也会被触发执行，我们把事件的这种传播机制叫做冒泡传播

这个传播机制是所有浏览器的传播机制。

GPU云服务器云服务器阻止事件传播 javascript的事件事件机制事件冒泡机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110219.html

JavaScript中几个重要的知识点（2） ---- DOM事件

摘要：使用来移除事件，参数必须与要移除的事件处理函数地址指针相同。在低版本浏览器中，绑定级事件的方法为中的级事件的事件处理程序都是在冒泡阶段执行的。 JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax 事件事件就是文档和浏览器的瞬间交互行为 1.事件类型点击: click 滚轮: scroll 滑动: move 进入: enter 加载: load ...

dantezhao 2019-08-20 17:33 评论0 收藏0
浅谈React事件机制

摘要：事件简介事件是合成事件，所有事件都自动绑定到最外层上。支持事件的冒泡机制，我们可以使用和来中断它。这样做简化了事件处理和回收机制，效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件，所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的，所以React 基于 Virtual DOM 实现了...

moven_j 2019-08-02 15:29 评论0 收藏0
浅谈React事件机制

摘要：事件简介事件是合成事件，所有事件都自动绑定到最外层上。支持事件的冒泡机制，我们可以使用和来中断它。这样做简化了事件处理和回收机制，效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件，所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的，所以React 基于 Virtual DOM 实现了...

MyFaith 2019-08-23 18:36 评论0 收藏0
浏览器事件模型中捕获阶段、目标阶段、冒泡阶段实例详解

摘要：目标阶段真正点击的元素的事件发生了两次，因为在上面的代码中，既在捕获阶段绑定了事件，又在冒泡阶段绑定了事件，所以发生了两次。所以很明显用直接绑定的事件发生在了冒泡阶段。如果对事件大概了解，可能知道有事件冒泡这回事，但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下，我抽时间整理了一下相关的知识。本文主要对事件机制一些细节进行讨论，过于基础的事件绑定知识方法没有介绍。特别少...

mylxsw 2019-08-21 10:38 评论0 收藏0
关于javascript事件机制的理解及事件监听的封装

摘要：说到事件机制首先要说一下事件模型原始事件模型在原始事件模型中，事件是不会传播，只是触发立即执行，函数会作为元素的属性被监听。标准函数绑定其中是否绑定在捕获阶段，表示采取捕获方式，表示采取冒泡方式。说到事件机制首先要说一下事件模型 1.原始事件模型在原始事件模型中，事件是不会传播，只是触发立即执行，函数会作为元素的属性被监听。这种方式和这种方式document.querySe...

lykops 2019-08-20 16:54 评论0 收藏0