DOM 事件
1、注册事件
// 事件处理函数
function handleMouseOver(event) {
// process
......
}
p.addEventListener("mouseover", handleMouseOver, [true | false]);
给 元素 p 注册一个 mouseover 事件监听器。
如果最后一个参数为 true,表示元素 p 的子孙元素触发事件流后,浏览器在 捕获阶段 会执行给元素 p 注册的 handleMouseOver()事件函数。
如果最后一个参数为 false,表示元素 p 的子孙元素触发事件流后,浏览器在 冒泡阶段 会执行给元素 p 注册的 handleMouseOver()事件函数。
2、删除事件
p.removeEventListener("mouseover");
3、DOM 事件 event 对象的函数和属性
type | 事件的名称(比如 mouseover) | 字符串 |
target | 事件的目标元素 | HTMLElement |
currentTarget | 处理事件的当前元素 | HTMLElement |
eventPhase |
事件生命周期的阶段 CAPTURING_PHASE , 此事件处于捕获阶段 AT_TARGET , 此事件处于目标阶段 BUBBLING_PHASE , 此事件处于冒泡阶段 |
数值 |
bubbles | 如果事件在文档中支持冒泡则返回 true,否则返回 false | 布尔值 |
cancelable | 如果事件有可撤销的默认操作则返回 true,否则返回 false | 布尔值 |
timeStamp | 事件的创建时间,如果时间不可用则为 0 | 字符串 |
stopPropagation() | 在当前元素的事件监听器被触发后,终止事件在 DOM 元素树中的传播; | void |
stopImmediatePropagation() |
立即终止事件在 DOM 元素树中的传播; 当前元素上未被触发的事件监听器会被忽略 |
void |
preventDefault() | 阻止浏览器执行与事件关联的默认操作 | void |
defaultPrevented | 如果调用过 preventDefault() ,则返回 true | 布尔值 |
4、事件流
一个事件的生命周期包括三个阶段:捕获(capture)、目标(target)、冒泡(bubbling)。
4.1、捕获阶段
当某个事件被触发时,浏览器会找出事件涉及的元素,它被称为该事件的目标元素。
浏览器会找出 body 元素和目标元素之间的所有元素,并分别检查它们,看看它们是否注册了事件处理器?
如果注册了,那么浏览器先执行这些中间元素的事件处理器,然后,才会执行目标元素的事件处理器。
事件捕获让目标元素的上级元素都有机会在事件传递到目标元素之前,对事件进行预处理,
这样的话,上级元素的事件处理器就可以阻止事件传递到目标元素。
阻止的方法是对 Event 对象调用 stopPropagation() 或者 stopImmediatePropagation() 函数。
这两个函数的区别在于,stopPropagation() 确保执行当前元素上注册的所有未执行事件监听器。
而 stopImmediatePropagation() 则忽略当前元素上注册的所有未执行事件监听器。
调用以上两个方法的意思就是,浏览器的捕获阶段在当前元素处结束,不再检查其他任何元素,并且会跳过目标和冒泡阶段。
4.2、目标阶段
当此阶段是三个阶段中最简单的,当捕获阶段完成后,浏览器会触发目标元素上的所有注册事件监听器。
如果在此阶段调用了stopPropagation()或者stopImmediatePropagation(),那么就会终止事件流,不再进入冒泡阶段。
4.3、冒泡阶段
完成目标阶段之后,浏览器开始沿着目标元素往 body 元素前进,浏览器检查沿途的每个上级元素,如果存在
针对该事件类型的已注册事件但没有启用捕获的监听器(意思就是,addEventListener()时的第三个参数为 false)的注册事件函数,则执行。
注意:
并不是所有事件都支持冒泡,可以用 bubbles 属性来检查某个事件能否冒泡?为 true 则支持,为 false 则不支持。
5、文档、窗口事件
6、鼠标事件
7、键盘事件
DOM 事件的更多相关文章
- DOM 事件深入浅出(二)
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- DOM 事件深入浅出(一)
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- DOM事件
在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
- 理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
- 你真的了解DOM事件么?
你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- dom事件与event对象总结
1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间. tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序. 事件 ...
- DOM事件简介--摘自admin10000
Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...
- 从click事件理解DOM事件流
事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...
- DOM事件机制进一步理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- centos7安装openoffice
[摘要:间接登录openoffice民网下载硬件包,但跳转的页里却不停挨没有开.末了只能正在末端里干活下了: 1. 挑选得当的版本:http://www.openoffice.org/download ...
- 安卓开发 想要获取某个View的高度(我是在做滚动浮层的时候用到的)
1.activity中有个onWindowFocusChanged()方法,可以获取控件的大小,别的地方可能会调用过早导致获取不到实际的大小 @Override public void onWindo ...
- 利用GCTA工具计算复杂性状/特征(Complex Trait)的遗传相关性(genetic correlation)
如文章"Genome-wide Complex Trait Analysis(GCTA)-全基因组复杂性状分析"中介绍的GCTA,是一款基于全基因组关联分析发展的分析工具,除了计算 ...
- Finders Keepers
function find(arr, func) { //var num = 0; //return num; var res = arr.filter(func); if(res.length){ ...
- NTDLL未文档化函数RtlGetNtVersionNumbers获取操作系统版本
作为新手,对获取操作系统版本号好奇过,因为曾经假象过一个场景:自己的程序在windows xp环境下编译,在windows 2003, windows 7,windows 8是否需要提权或者兼容处理, ...
- 使用JS脚本获取url中的参数
第一种方式:使用分隔符及循环查找function getQueryString(name) { // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空 if(location.href. ...
- [问题记录.VisualStudio]VS2013无法新增和打开项目
[问题描述] 1) 打开项目失败,报“项目文件只读”或“空引用”错误. 2) 无法新建项目,没有任何可用模板. 3) TFS都正常 [问题产生] 机器环境: 1) 装的Win10双系统,其中一个系统是 ...
- SUSE zypper failed to work
记录解决的一个问题. 在SUSE 中zypper 不能使用,错误如下: hostname~ # zypper install make Refreshing service 'packman'.Une ...
- Oracle查询某段日期内某个时间段的数据
示例: 查询最近一周12:30分到13:00这段时间内的订单量: SELECT * FROM T_ORDER O WHERE O.CREATEDATETIME BETWEEN SYSDATE AND ...
- linux服务器apache 一个IP,一个端口,建立多个网站的方法。
找到apache-tomcat-6.0.14\conf\server.xml ,再services 后面添加此段代码: Xml代码 <!-- 此处 新增的项目配置--> <Ser ...