事件

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级规范中，处于目标阶段应属于冒泡阶段

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

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

Javascript高级编程学习笔记（57）—— 事件（1）事件流的更多相关文章

  1. Javascript高级编程学习笔记（70）—— 事件（14）内存和性能

    由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#) ...

  2. Javascript高级编程学习笔记（69）—— 事件（13）触摸与手势事件

    触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...

  3. Javascript高级编程学习笔记（67）—— 事件（11）HTML5事件

    DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...

  4. Javascript高级编程学习笔记（66）—— 事件（10）变动事件

    变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...

  5. Javascript高级编程学习笔记（63）—— 事件（7）鼠标及滚轮事件

    鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...

  6. Javascript高级编程学习笔记（62）—— 事件（6）焦点事件

    焦点事件 焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 document.hasFocus() 方法配合使用 以及 document.activeElement 属性配合可以知晓用户在页 ...

  7. Javascript高级编程学习笔记（61）—— 事件（5）UI事件

    UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...

  8. Javascript高级编程学习笔记（59）—— 事件（3）事件对象

    事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...

  9. Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

  10. Javascript高级编程学习笔记（68）—— 事件（12）设备事件

    设备事件 随着智能手机与平板电脑的普及,为了更好地让用户与这些设备进行交互 浏览器引入了一种新的方式,而一类新的事件也应运而生,这就是设备事件 W3C从2011年开始制定关于设备事件的草案 下面将会介 ...

随机推荐

  1. Linux Centos7.5从docker的安装到容器的部署运行

    环境: Win10 内的 VMware workstation(Centos7 64位) 所有命令皆为 root 用户, 非 root 用户应在命令前加 sudo 查看系统版本命令: cat /etc ...

  2. pwn学习（1）

    0x00 简介 入职之后,公司发布任务主搞pwn和re方向,re之前还有一定的了解,pwn我可真是个弟弟,百度了一番找到了蒸米大佬的帖子,现在开始学习. 0x01 保护方式 NX (DEP):堆栈不可 ...

  3. Database Change Notification

    使用java监控oracle数据库的变化,主要是针对表数据,如果发生变化,使用select去查询,能够达到推送的目的 package com.test.notifi; import java.sql. ...

  4. 4、Nginx安装与配置

    一.简介 Nginx官网:http://nginx.org/ Nginx(发音同engine x)是一个异步框架的 Web服务器,也可以用作反向代理,负载平衡器 和 HTTP缓存.该软件由 Igor ...

  5. 洛谷 p2196 挖地雷 题解

    好久没有写博客了,今天水几篇博客 传送门 挖地雷这个题之前在  信息学奥赛一本通  上做过几乎一样的题,但是由于数据太水导致我当时过了,进而导致我昨天(4.28)考试丢了20分,今天写一篇题解 这个挖 ...

  6. 032 Java再次总结

    1.大纲 多线程怎么用的,线程池,事务,传播机制与隔离级别,反射,泛型,数据库引擎的区别,数据库merge,窗口函数,fastJson,JVM调优,GC钩子,Linux的awk,shell,HashM ...

  7. SpringBoot主程序注解@SpringBootApplication简单分析

    一.@SpringBootApplication说明这个类是SpringBoot的主配置类,SpringBoot就应该运行这个类的main方法来启动SpringBoot应用: @SpringBootA ...

  8. ORM之SQLALchemy

    今天来聊一聊 Python 的 ORM 框架 SQLAlchemy SQLAlchemy 没有 Django 的 Models 好用!因为models是Django自带的ORM框架,也正是因为是Dja ...

  9. Python数据处理PDF

    Python数据处理(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1h8a5-iUr4mF7cVujgTSGOA 提取码:6fsl 复制这段内容后打开百度网盘手机A ...

  10. wpa_cli 关联无线网络

    fq关联无线网络,不同的无线网络认证方式不同设置:    1)open(开放式认证方式,分为):         wpa_cli -iwlan0 set_network 0 ssid '"w ...