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元素
那么这个点击事件将会按照以下顺序传播
- <div>
- <body>
- <html>
- document
基本上所有的现代浏览器都支持冒泡事件流，有区别的地方仅仅在于冒泡到什么地方为止
一般来说主流的高级浏览器冒泡都会传递到window才停止
事件捕获
Netscape 团队提出的另一种事件流叫事件捕获
事件捕获的概念与事件冒泡的概念相反：即事件先发生在不太具体的元素，然后向下传递到较为具体的元素
仍以刚才上方的HTML为例，那么事件的触发顺序为：
- document
- <html>
- <body>
- <div>
虽然DOM2级事件规范要求事件应该从document开始传播
但是实现了事件捕获的浏览器基本上都是从window开始传播的
需要注意的是，事件捕获老版本浏览器不支持，但是事件冒泡没有这一限制
DOM事件流
“DOM2级事件”规定事件流包括三个阶段：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
同样以上方的HTML代码为例，DOM事件流的触发顺序如下：
- document
- <html>
- <body>
- <div>
- <body>
- <html>
- document
上述过程中 1~3 是事件捕获阶段，4是处于目标阶段，5~7是事件冒泡阶段
在DOM2级规范中，处于目标阶段应属于冒泡阶段
但实际上在浏览器的实现中在捕获阶段和冒泡阶段都会触发目标元素的事件
所以我们有两个机会在目标对象上操作事件
Javascript高级编程学习笔记（57）—— 事件（1）事件流的更多相关文章
- Javascript高级编程学习笔记（70）—— 事件（14）内存和性能
由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#) ...
- Javascript高级编程学习笔记（69）—— 事件（13）触摸与手势事件
触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...
- Javascript高级编程学习笔记（67）—— 事件（11）HTML5事件
DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...
- Javascript高级编程学习笔记（66）—— 事件（10）变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
- Javascript高级编程学习笔记（63）—— 事件（7）鼠标及滚轮事件
鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...
- Javascript高级编程学习笔记（62）—— 事件（6）焦点事件
焦点事件 焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 document.hasFocus() 方法配合使用 以及 document.activeElement 属性配合可以知晓用户在页 ...
- Javascript高级编程学习笔记（61）—— 事件（5）UI事件
UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...
- Javascript高级编程学习笔记（59）—— 事件（3）事件对象
事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...
- Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
- Javascript高级编程学习笔记（68）—— 事件（12）设备事件
设备事件 随着智能手机与平板电脑的普及,为了更好地让用户与这些设备进行交互 浏览器引入了一种新的方式,而一类新的事件也应运而生,这就是设备事件 W3C从2011年开始制定关于设备事件的草案 下面将会介 ...
随机推荐
- Celery提交任务出错？
跟着官方的入门教程部署和运行的,为啥报这个错? tasks.py # -*- encoding:UTF-8 -*- from celery import Celery brokers = 'redis ...
- 2018-2019-2 网络对抗技术 20165328 Exp6 信息收集与漏洞扫描
目录 实验要求 基础问题回答: 实验过程: 各种搜索技巧的应用及DNS IP注册信息的查询 基本扫描技术 漏洞扫描--使用OpenVAS 实验感想 实验要求 (1)各种搜索技巧的应用 (2)DNS I ...
- centos7 安装Mysql8.0笔记
下载MySQL yum源 wget https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm 安装yum源 yum lo ...
- webpack打包优化之外部扩展externals的实际应用
目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...
- org.json.JSONObject的getString和optString使用注意事项
结论:org.json.JSONObject的getString如果取不到对应的key会抛出异常,optString则不会 /** * Returns the value mapped by {@co ...
- nginx了解
nginx常用命令 nginx -s quit 优雅停止nginx,有连接时会等连接请求完成再杀死worker进程 nginx -s reload 优雅重启,并重新载入配置 ...
- Kubernetes系列之Helm介绍篇
本次系列使用的所需部署包版本都使用的目前最新的或最新稳定版,安装包地址请到公众号内回复[K8s实战]获取 介绍 Helm 是 Deis 开发的一个用于 Kubernetes 应用的包管理工具,主要用来 ...
- 福州大学软件工程1916|W班 第6次作业成绩排名
作业链接 团队第三次-项目原型设计 评分细则 博客评分标准 在随笔开头,备注小组同学的学号.(1') 文字准确.样式清晰.图文并茂.字数在1000字左右.(10') 原型模型必须采用专用的原型模型设计 ...
- 计蒜客 踏青 dfs
题目: https://www.jisuanke.com/course/2291/182234 思路: 紫书P163联通块问题. 1.遍历所有块,找到草地,判断合法性,合法其id值加一,最后加出来的i ...
- 解决win10 报错 git pull error: cannot open .git/FETCH_HEAD: Permission denied
sh配置git 用户解决了 git config --list //查看当前的config配置 git config --global user.name "youruser" / ...