美文网首页
理解javascript事件流

理解javascript事件流

作者: 笑傲江湖拎壶冲 | 来源:发表于2019-03-29 16:18 被阅读0次

一个事件的生命周期包括三个阶段:捕捉 目标 冒泡

捕捉阶段

当某个事件被触发时,浏览器会找出事件涉及的元素,这个就是事件的目标。浏览器会找出body元素和目标之间的所有元素并检查它们,看看它们是否带有事件处理器,浏览器会优先触发这些事件处理器,然后才会轮到目标自身的处理器。

事件捕捉让目标元素的各个上级元素都有机会在事件传递到目标元素本身之前对其作出反应,而stopPropagation终止事件在元素树中的浮动,阻止事件继续流动

目标阶段

目标阶段是三个阶段中最简单的,当捕捉阶段完成后,浏览器会触发目标元素上任何已添加的事件类型监听器

冒泡阶段

完成目标阶段后,浏览器开始转而沿着上级元素链朝body元素前进,在沿途的每个元素上,浏览器会检查是否存在针对该事件类型但没有启用捕捉的监听器,addEventListener第三个参数是false代表的是事件冒泡

相关文章

  • 理解javascript事件流

    一个事件的生命周期包括三个阶段:捕捉 目标 冒泡 捕捉阶段 当某个事件被触发时,浏览器会找出事件涉及的元素,这个就...

  • 13 事件

    本章内容 理解事件流 使用事件处理程序 不同的事件类型 JavaScript 与 HTML 之间的交互是通过事件实...

  • 事件

    本章内容:理解事件流、使用事件处理程序、不同的事件类型 JavaScript与HTML之间的交互是通过事件实现的。...

  • JavaScript事件捕获冒泡与捕获

    事件流 JavaScript中,事件流指的是DOM事件流。 概念 事件的传播过程即DOM事件流。 事件对象在 DO...

  • JavaScript事件流原理解析

    原文作者:谢灿勇原文地址:http://www.cnblogs.com/st-leslie/p/5907556.h...

  • JavaScript事件流原理解析

    JavaScript事件流原理解析 首先这里先来举一个例子 var content=document.get...

  • Js事件循环

    列表 JavaScript事件循环 测试金字塔 stub JavaScript事件循环理解 javaScript语...

  • JavaScript事件(一)

    1. Javascript事件流#### 事件流是指页面中对象接受事件的顺序,可以分为冒泡事件流和捕获事件流,首先...

  • JavaScript中的事件模型如何理解?

    一、事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页...

  • 说说JavaScript中的事件模型

    一、事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页...

网友评论

      本文标题:理解javascript事件流

      本文链接:https://www.haomeiwen.com/subject/axolbqtx.html