技术原理

JavaScript中的事件冒泡和事件捕获:您需要知道的一切

成为经过认证的专业

事件冒泡和事件捕获是JavaScript在事件流时最常用的术语。这是HTML DOM API中事件传播的两种方式。这篇关于JavaScript中事件冒泡和事件捕获的文章将按照以下顺序详细描述为什么我们在web开发中需要这些:

JavaScript中的事件冒泡是什么?什么是事件传播?什么是事件捕获?在JavaScript工作过程中使用事件冒泡和事件捕获什么是JavaScript中的事件冒泡?”“事件冒泡”是人们在使用JavaScript开发web应用程序或网页时必须遇到的术语。基本上,事件冒泡(Event Bubbling)是一种技术,当一个项嵌套到另一个项上并且必须属于同一事件时,调用事件处理程序。它类似于封装。

event bubbling - Event Bubbling and Event Capturing In JavaScript- edureka

事件冒泡只是JavaScript中事件处理的一小部分。为了更好地理解它,我们必须了解事件传播以及它如何支持事件冒泡。

什么是事件传播

“事件传播可以比较为父项,事件冒泡和捕获可以比较为子项 el.addEventListener公司(“click”,侦听器,true)

这里的侦听器值已注册为“true”,因此正在捕获此事件。如果没有值,则默认值为false,不会捕获事件。因此,在此阶段,值为true的事件只会从窗口找到并被调用和捕获。

然后在事件目标阶段,调用所有注册的侦听器,而不管其标志状态是真是假。

在JavaScript

中使用事件冒泡和事件捕获在冒泡阶段,只调用非捕获器,即标记值为“false”的事件。事件冒泡和事件捕获在DOM(文档对象模型)术语中非常有用和重要。

el.addEventListener公司('click',listener,false)//listener不捕获el.addEventListener公司('click',listener)//listener不捕获上面的

代码显示了冒泡和捕获阶段的工作。并非所有事件都指向事件目标。他们中的一些人不会冒泡。他们的行程在目标阶段结束后停止。下图说明了三事件阶段流:

事件冒泡在所有类型的事件中都不起作用,但是侦听器必须拥有事件对象的“.bubble”布尔属性。其他一些属性包括:

e.target:它引用事件目标。e、 currentTarget:当前侦听器注册的模式。这里使用这个关键字引用这个值。e、 事件阶段:它是一个整数,表示在目标阶段捕获阶段、冒泡阶段等其他三个关键字。工作过程

让我们更仔细地看一下上图。让我们点击“buttone”元素,然后立即触发一个事件。通常,事件从树的最顶端元素根开始其旅程。然后它跟随树,目标事件是“buttone”。下面是它的运行方式:

,如图所示,事件通过DOM术语到达目标事件。现在,一旦事件到达目标,它就不会结束。它在如下图所示的DOM术语中不停地运行。

event - event bubbling and event capturing - edureka

就像以前一样,沿着事件路径向上移动的每个元素都会得到关于其存在的通知。在这种情况下,你一定在想我们是否能停止这一进程。好吧,问题的答案是,我们可以阻止事件的传播。这是通过调用事件对象

的“stopPropagation”方法实现的窗口.addEventListener('click',e=>{e.stopPropagation();},true);窗口.addEventListener('click',listener('c1'),true);窗口.addEventListener(“click”,侦听器(“b1”));窗口.addEventListener(“click”,侦听器(“b2”));

通过应用关键字,我们可以停止传播。它的工作原理是这样的,当我们应用关键字“stopPropagation”时,主事件下的所有事件都不会被调用,因此它们不会被调用,正如上面的代码中所提到的那样。还有一个关键字叫做“stopImmediatePropagation”。顾名思义,它立即停止了兄弟姐妹的诉讼。

就这样,我们的文章到此结束。我希望你了解什么是JavaScript中的事件冒泡和事件捕获。

既然你知道JavaScript中的事件冒泡和事件捕获,请查看Edureka的Web开发认证培训。Web开发认证培训将帮助你学习如何使用HTML5、CSS3创建令人印象深刻的网站,Twitter Bootstrap 3、jQuery和googleapi并将其部署到Amazon简单存储服务(S3)上。

有问题要问我们吗?请在“JavaScript中的事件冒泡和事件捕获”的评论部分中提到它,我们将回电给您

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
猎维人工智能 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录