美文网首页
JS事件流

JS事件流

作者: Small_Song | 来源:发表于2021-06-18 10:51 被阅读0次

今天主要介绍上我们使用的浏览器的事件流。

DOM2级事件规定的事件流包括三个阶段:

  1. 事件捕获阶段
  2. 处于目标阶段
  3. 事件冒泡阶段
事件捕获阶段(Event Capturing)

事件捕获的用意是在于事件到达预定目标之前捕获它。因此,事件捕获的过程是让不太具体的节点先更早接收到事件,而最具体的节点应该最后接收到事件。

如上图所示,按照事件捕获的思想,在此过程(click页面某个元素)中,document对象会首先接收到click事件,然后事件沿着dom树依次向下,一直传播到实际目标,即div元素。但是在事件流中的捕获阶段,实际目标div元素是不会接收到事件的,这就意味着没在捕获阶段,事件从document到再到后就停止了。(但是IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件)
下一个阶段是“处于目标”阶段,于是事件在

发生,并在事件处理中被堪称冒泡阶段的一部分。最后,冒泡事件发生,事件又传播回文档。

冒泡阶段(Event Bubbling)

事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点,即document对象。


DOM2 与 DOM0区别

DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:

addEventListener()
removeEventListener()

所有的DOM节点都包含这两个方法,而且接受三个参数:

第三个参数默认为false,代表在冒泡阶段执行。设为true则在捕获阶段执行

相关文章

  • JavaScript的事件机制详解

    【js事件详解】js事件封装函数,js跨浏览器事件处理机制 一、事件流 事件流描述的是从页面中接受事件的顺序。IE...

  • 事件基础(2)

    js事件的三个阶段:捕获,目标,冒泡 IE:IE事件流是事件冒泡流 Netscape事件流是事件捕获流 IE事件...

  • JS事件 事件流

    一:什么是事件流呢? 通俗的来说,可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上,那么你的手指指向的不是...

  • js事件、事件流

    事件 js组成:ECMA语法,规定了js的基本规则,类似于使用var定义变量,使用for来规定循环。BOM:浏览器...

  • JS事件——事件流

    document 往事件触发地点,捕获前进,遇到相同注册事件立即触发执行 到达事件位置,触发事件,如果该处既注册了...

  • js事件流

    1、html事件处理 #单引号 #双引号需要转译成"事件处理程序 function myMethod(...

  • JS事件流

    elementObject.addEventListener(eventName,function(){},tru...

  • JS—事件流

    事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。 DOM3级事件,规定了以下几类事件*UI事件:当用户与页面...

  • js事件流

    一:事件冒泡和事件代理事件:事件是文档和浏览器窗口中发生特定交互的瞬间,当我们与浏览器中的web页面进行某些类型交...

  • js 事件流

    事件流 Click Me 冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标的顺序触发。触发的顺序是:di...

网友评论

      本文标题:JS事件流

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