博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入理解DOM事件机制系列第一篇——事件流
阅读量:6614 次
发布时间:2019-06-24

本文共 1455 字,大约阅读时间需要 4 分钟。

前面的话

  javascript操作CSS称为,而javascript与HTML的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,而事件流(又叫事件传播)描述的是从页面中接收事件的顺序。本文将详细介绍该部分的内容

 

历史

  当浏览器发展到第四代时(IE4及Netscape4),浏览器开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有某个特定的事件?想象画在一张纸上的一组同心圆。如果把手指放在圆心上,那么手指指向的不是一个圆,而是纸上的所有圆

  两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上,甚至也单击了整个页面

  但有意思的是,IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流

 

事件冒泡

  IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)

  以下列HTML结构为例,说明事件冒泡、事件捕获及事件流

Document

  如果单击了页面中的<div>元素,那么这个click事件沿DOM树向上传播,在每一级节点上都会发生,按照如下顺序传播:

(1)    
(2) (3) (4) document

  [注意]所有现代浏览器都支持事件冒泡,但在具体实现在还是有一些差别。IE9、Firefox、Chrome、Safari将事件一直冒泡到window对象

(1)    
(2) (3) (4) document(5) window
Document

事件捕获

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

  以同样的HTML结构为例,说明事件捕获

Document

  在事件捕获过程中,document对象首先接收到click事件,然后事件沿DOM树依次向下,一直传播到事件的实际目标,即<div>元素

(1)    document(2)    (3)    (4)    

  [注意]IE9、Firefox、Chrome、Safari等现代浏览器都支持事件捕获,但是从window对象开始捕获

(1)    window(2)    document(3)    (4)    (5)    

  addEventListener()方法中的第三个参数设置为true时,即为事件捕获阶段

Document

事件流

  事件流又称为事件传播,DOM2级事件规定的事件流包括三个阶段:事件捕获阶段(capture phase)、处于目标阶段(target phase)和事件冒泡阶段(bubbling phase)

  首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件,最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应

转载于:https://www.cnblogs.com/xiaohuochai/p/5859476.html

你可能感兴趣的文章
《Python编程快速上手——让繁琐工作自动化》——1.4 在变量中保存值
查看>>
Git 两分钟指南
查看>>
想改进你的卷积神经网络?看看这14种设计模式!
查看>>
《Swift入门经典(第2版)》——导读
查看>>
安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情(六)
查看>>
《用Python写网络爬虫》——第1章 网络爬虫简介 1.1 网络爬虫何时有用
查看>>
2000万人口的大北京,上下班原来是这样的 (附超炫蝌蚪图)
查看>>
《C语言解惑》一1.3 逻辑操作符和增量操作符
查看>>
《Python参考手册(第4版•修订版)》——1.16 模块
查看>>
[LeetCode]--100. Same Tree
查看>>
Android学习之——实现圆角Button
查看>>
阿里蒋晓伟谈流计算和批处理引擎Blink,以及Flink和Spark的异同与优势
查看>>
项目经验积累
查看>>
vue mixin的使用
查看>>
EditText框输入表情所注意的
查看>>
<react学习笔记(3)>属性与状态以及组件的生命周期(初始化阶段)
查看>>
LeetCode 309. Best Time to Buy and Sell Stock with Cooldown
查看>>
最适合使用RxJava处理的四种场景
查看>>
新手小白建站指南
查看>>
Spring 事务源码
查看>>