`
ch_kexin
  • 浏览: 898007 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

处理事件问题(在事件中分别找出捕获阶段,目标阶段,冒泡阶段)

 
阅读更多
问题
外场景中嵌套一个内场景,内场景中嵌套一个子内场景,子内场景中有事件,找出事件流的三个阶段?
知识要点
事件侦听器(addEventListener)事件对象类型(MouseEvent.MouseEvent_XXX)事件流信息(target,currentTarget,bubbles)添加场景(addChild)
解决问题
我们首先创建一个外场景,在外场景中添加一个内场景,在内场景中添加一个子内场景,在子内场景中添加一个侦听器(addEventListener),侦听器的第一个参数是Type(事件对象类型,例如MouseEvent_CLICK),第二个参数是Function(自定义的listener方法,方法中需要有一个参数为event(MouseEvent类型的)),第三个参数是useCapture(默认为false),在listener方法中可以判断目标阶段和冒泡阶段,想判断是否为目标阶段用target和currentTarget,if(event.target ==event.target),则为目标阶段,想判断是否为冒泡阶段用bubbles,if(event.bubbles==true),则为冒泡阶段。我们在内场景中也添加一个侦听器,方法同理,但是第三个参数useCapture我们要设置true,在listener方法中我们就可以判断是捕获阶段
总结
我们可以分清事件流的三个阶段,捕获阶段,目标阶段,冒泡阶段。
捕获阶段包括舞台到目标节点的父节点范围内的所有节点,目标阶段包括目标节点,冒泡阶段包括从目标节点的父节点返回到舞台行程的中遇到的节点。我们在目标节点所在的场景中获取目标阶段和冒泡阶段,在目标节点所在场景的上一个场景(至少上一个场景)能获取捕获阶段,我们要注意的是addEventListener的第三个参数useCapture如果为false目标阶段,冒泡阶段处于激活状态,如果为true捕获阶段处于激活状态。
分享到:
评论

相关推荐

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

    例如,当我们希望在处理某个事件时阻止其他元素上同类型事件的进一步触发,或者需要在事件到达目标元素之前执行一些操作时,就可以利用这两种机制。此外,对于特定场景,如点击事件可能会在不同元素上触发多个函数,...

    事件冒泡及捕获

    在实际开发中,合理地利用事件冒泡和事件捕获可以帮助我们设计出高效、可维护的代码。例如,通过事件捕获可以实现全局的触摸事件监听,而在特定元素上使用事件冒泡可以确保只有在特定条件下才执行某些操作。理解并...

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

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

    通俗易懂地理清js事件流中的捕获阶段,目标阶段和冒泡阶段的具体运行顺序

    众所周知,事件流分为三个阶段冒泡分为捕获阶段,目标阶段和冒泡阶段, 这三个阶段到底是如何运行的呢?如果给同一个事件绑定上冒泡和捕获的事件到底会怎样触发呢? 下面我用dom2级事件函数来变换捕获和冒泡,用...

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

    DOM事件流包括三个阶段:事件捕获、目标阶段和事件冒泡。在捕获阶段,事件从最外层的元素(如HTML文档)向下传递到目标元素。然后,在目标阶段,事件真正发生在目标元素上。最后,事件冒泡阶段开始,事件从目标元素...

    事件冒泡解决方案

    在JavaScript的DOM编程中,事件冒泡是一个非常重要的概念,尤其在处理多级嵌套元素的事件时。事件冒泡是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档...

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

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

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

    事件监听涉及的几个核心概念包括事件传播的两种方式:事件捕获和事件冒泡,以及兼容性问题和事件对象的使用。 首先,事件监听器可以通过多种方法添加,包括直接在HTML元素上使用内联属性如onclick,或通过...

    JS事件冒泡浏览器兼容

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

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

    JavaScript中的事件冒泡机制是DOM事件处理的核心概念之一,它涉及到事件在DOM树中的传播方式。事件流主要有三种阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始,沿着树向下...

    2022年生动详细解释javascript的冒泡和捕获.docx

    在实际开发中,理解事件冒泡和捕获对于编写交互式的网页非常重要,尤其是在处理复杂的DOM结构和需要阻止事件默认行为(如阻止事件冒泡或阻止默认链接行为)时。正确地使用这两种机制可以提高代码的灵活性和可维护性...

    JS中事件冒泡和事件捕获介绍

    谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。 事件冒泡阶段:...

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

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

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

    尽管在实际应用中事件捕获使用较少,但它有助于在事件到达目标元素之前进行预处理。 下面的代码展示了事件捕获的例子: ```javascript window.onload = function() { let box = document.getElementById("box...

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

    事件冒泡和事件捕获是两种不同的事件传播机制,它们决定了事件在DOM树中如何从最具体的元素(叶子节点)传递到最不具体的元素(根节点)。理解这两者对于编写高效且可控的事件处理程序至关重要。 事件捕获是事件...

    事件冒泡与事件捕获

    **事件流** 是事件传播的整个过程,包括事件捕获阶段、处于目标阶段(即事件实际发生的地方)和事件冒泡阶段。事件流描述了事件如何在DOM树中传递,提供了一种有序处理事件的方式。 总结来说,事件冒泡和事件捕获是...

    js事件机制----捕获与冒泡机制实例分析

    每个元素都绑定了点击事件,并使用`addEventListener`来分别在捕获和冒泡阶段执行事件处理函数`show`。在捕获阶段,事件处理函数的执行顺序是从`document`到`孙子div`;在冒泡阶段,顺序是从`孙子div`到`document`。...

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

    事件执行顺序通常遵循“捕获-目标-冒泡”的规则,即事件首先在最外层元素(捕获阶段),然后到达目标元素,最后在目标元素及其所有祖先元素(冒泡阶段)触发事件处理。 理解这些基本概念后,可以有效地利用...

Global site tag (gtag.js) - Google Analytics