`

事件冒泡和事件捕获机制

阅读更多

二者作用:描述事件触发时序问题


事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内
事件冒泡:自下而上的去触发事件---由内到外

 

阻止事件冒泡

可以通过以下三种方法做到不同程度的阻止。

A:return false --->在事件的处理中,可以阻止默认事件和冒泡事件。

B:event.preventDefault()---> 在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。

C:event.stopPropagation()---> 在事件的处理中,可以阻止冒泡但是允许默认事件的发生。

 


绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获
true,事件捕获;false,事件冒泡
一般默认false,即事件冒泡
Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了

 

下面是我尝试的例子:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡与事件捕获</title>
    <script>
        window.onload = function () {
            document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发,"+this.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发,"+this.id)
            },true)
        }

    </script>
</head>
<body>
<div id="parent">
    parent事件
      <div id="child" class="child">
    child事件
    </div>
</div>
</body>
</html>

 

例子里我加了第三个true,是事件捕获。

如果不加则是默认的事件冒泡,这时候事件触发时序就是自内向外

 

 

分享到:
评论

相关推荐

    javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...

    JS冒泡事件与事件捕获实例详解

    冒泡事件和事件捕获是JavaScript中处理事件传播的两种主要模型,它们定义了事件在DOM树中传播的顺序。在实际的Web开发中,深入理解这两种模型对于正确处理事件,避免潜在的问题至关重要。 冒泡事件是指当一个事件在...

    javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    本文主要探讨了JavaScript中事件绑定的几种方式,以及事件冒泡和事件捕获机制。 1. **事件绑定方式**: - **方式1:内联事件绑定**。这是最基础的绑定方式,直接在HTML元素的`onclick`、`onblur`等属性中写入...

    事件冒泡及捕获

    事件冒泡和事件捕获是两种不同的事件处理机制,它们决定了事件如何在DOM(Document Object Model)层次结构中传播。了解这两者对于优化事件处理性能和编写高效代码至关重要。 事件冒泡是从最具体的节点(通常是DOM...

    JS中绑定事件顺序(事件冒泡与事件捕获区别)

    JavaScript中的事件处理机制是网页交互的核心,其中包括了两种主要的事件传播模式:事件冒泡(Bubbling)和事件捕获(Cropping)。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到最外层的节点。而事件捕获则...

    Android-传统事件捕获和冒泡的流程解析

    本文将深入解析Android中事件捕获和冒泡的流程,帮助开发者更好地理解和运用这一机制。 事件在Android中主要通过View和 ViewGroup对象进行传递。当用户在屏幕上触摸或点击时,系统会生成一个事件对象,如...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    5. **总结**:事件冒泡和事件捕获是JavaScript事件模型的两个阶段,它们定义了事件如何在DOM树中传播。事件委托则是一种高效利用事件处理的策略,可以降低内存消耗,提高性能,尤其适用于动态添加或删除DOM元素的...

    一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

    事件触发时序问题中的两个重要概念是事件冒泡(event bubbling)和事件捕获(event capturing)。这两个术语描述了事件流(event flow)在DOM树中的传播顺序。 事件冒泡是指当一个元素上的事件被触发后,该事件会...

    js事件监听机制(事件捕获)总结

    关于事件的传播机制,W3C标准规定了事件流分为捕获和冒泡两个阶段。捕获阶段是从根节点开始,逐级向下直到目标节点;冒泡阶段则是从目标节点逐级向上,直到根节点。默认情况下,事件处理是采用冒泡的方式进行,除非...

    【JavaScript源代码】基于事件冒泡、事件捕获和事件委托详解.docx

    总的来说,理解事件冒泡和事件捕获可以帮助开发者更好地控制和组织事件处理,而事件委托则是一种利用这两个机制来提高代码效率和可维护性的策略。在实际开发中,合理运用这些概念可以提升用户体验并降低资源消耗。

    利用事件冒泡(Event Bubbling )获取鼠标下的元素属性

    在JavaScript编程中,事件处理是不可或缺的一部分,尤其是事件冒泡(Event Bubbling)机制,它是理解DOM...在实际开发中,结合事件捕获(Event Capturing)和事件冒泡,可以更好地控制事件流,实现更加精细的事件管理。

    【JavaScript源代码】JavaScript中事件冒泡机制示例详析.docx

    事件流主要有三种阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始,沿着树向下传播到目标节点。在这个阶段,事件首先由最外层的父元素接收,然后逐级向下传递,直到到达触发...

    简析JavaScript事件、以及捕获和冒泡

    本文将深入探讨JavaScript事件机制,特别是事件的捕获和冒泡阶段。 首先,理解JavaScript事件的基础概念至关重要。事件是用户或浏览器在与网页交互时发生的动作,比如点击按钮、页面加载或滚动等。当这些事件发生时...

    JS事件冒泡浏览器兼容

    在JavaScript中,有多种事件模型,包括事件冒泡(Bubble Phase)和捕获阶段(Capture Phase)。事件冒泡是最常见的一种,它始于事件目标元素(例如,用户点击的按钮),然后依次经过其所有父元素,直到到达文档的根...

    事件冒泡与事件捕获

    总结来说,事件冒泡和事件捕获是JavaScript中处理事件的两种主要机制,理解它们的工作原理对于优化事件处理逻辑和编写高效代码至关重要。了解这两种机制有助于我们在处理复杂交互时更好地控制事件的行为。

    js之事件冒泡,事件捕获,事件委托

    事件冒泡、事件捕获和事件委托是JavaScript事件模型中的三个重要概念。 首先,事件捕获是一种事件处理机制,它从DOM树的根节点(window对象)开始,向下遍历到目标元素。这种机制使得事件首先在最不具体的节点(即...

Global site tag (gtag.js) - Google Analytics