Javascript高级编程学习笔记（57）—— 事件（1）事件流

事件

JS与HTML的交互是通过事件实现的

而事件指的就是：文档或浏览器窗口特定的交互瞬间

 

可以通过侦听器来预定事件，以便在事件发生时执行相应的代码

这种模式也是设计模式中的观察者模式

 

事件流

有了事件，也就有了事件流的概念

事件流故名思意：也就是事件的流向，所以事件流描述的是从页面中接收事件的顺序

虽然事件流描述的都是事件的流向，但是事件流在当时的两个最大的浏览器厂商的提出中却是两个差不多完全相反的事件流概念

一是IE的冒泡事件流，二是Netscape的捕获事件流

 

事件冒泡

即事件开始时由最具体的元素（也就是文档中层次最深的元素）接收，然后逐级向上传播到较为不具体的节点

以下方的HTML代码举例：

<!DOCTYPE html>
<html>
    <head>
        <title> lhy <title>
    <head>
    <body>
        <div id="myDiv"> Click me</div>
    <body>
<html>

如果我们点击div元素

那么这个点击事件将会按照以下顺序传播

  1. <div>
  2. <body>
  3. <html>
  4. document

基本上所有的现代浏览器都支持冒泡事件流，有区别的地方仅仅在于冒泡到什么地方为止

一般来说主流的高级浏览器冒泡都会传递到window才停止

 

事件捕获

Netscape 团队提出的另一种事件流叫事件捕获

事件捕获的概念与事件冒泡的概念相反：即事件先发生在不太具体的元素，然后向下传递到较为具体的元素

仍以刚才上方的HTML为例，那么事件的触发顺序为：

  1. document
  2. <html>
  3. <body>
  4. <div>

虽然DOM2级事件规范要求事件应该从document开始传播

但是实现了事件捕获的浏览器基本上都是从window开始传播的

需要注意的是，事件捕获老版本浏览器不支持，但是事件冒泡没有这一限制

 

DOM事件流

“DOM2级事件”规定事件流包括三个阶段：

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

同样以上方的HTML代码为例，DOM事件流的触发顺序如下：

  1. document
  2. <html>
  3. <body>
  4. <div>
  5. <body>
  6. <html>
  7. document

上述过程中 1~3 是事件捕获阶段，4是处于目标阶段，5~7是事件冒泡阶段

在DOM2级规范中，处于目标阶段应属于冒泡阶段

但实际上在浏览器的实现中在捕获阶段和冒泡阶段都会触发目标元素的事件

所以我们有两个机会在目标对象上操作事件

posted @ 2019-02-08 09:55  巽秋  阅读(283)  评论(0)  编辑  收藏  举报