第十三章——事件对象

在触发DOM的某个事件上,会产生一个事件对象event,这个对象包含着所有与事件相关的信息。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论指定事件处理程序使用什么方法(DOM0级,DOM2级),都会传入event对象。

event对象包含着与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。如下,是所有事件都有的成员:

在事件处理函数内部,this始终等于currentTarget的值,而target则只包含事件的实际目标。

如果直接将事件处理程序指定给了目标元素,则this,currentTarget和target包含相同的值。

这里点击a标签的时候,相应的this的值和target,currentTarget的对象分别如上图所示。

在需要通过一个函数处理多个事件时候,可以使用type属性。

如上例子:

设置event.stopPropagation(),这样点击test后,就只出现一个提示框。从而避免触发了注册在body上面的click事件,阻止了click事件的冒泡。

否则的话,就会出现两次提示框。

 事件对象eventPhase属性,可以用来确认事件当前处于事件流的哪个阶段

执行顺序可以参考DOM2级事件流。

在这里如果更改addEventListener为冒泡事件,则执行顺序,会发生变化:

时间: 2024-07-29 20:13:13

第十三章——事件对象的相关文章

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

JavaScript高级程序设计:第十三章 事件

JavaScript与HTML之间的交互是通过事件实现的. 一.事件流 首先我们要明白事件流的概念.当我们点击一个按钮时,也点击了按钮的容器元素,甚至也点击了整个事件.事件流描述就是从页面中接收事件的顺序.在主流浏览器中有两种事件接收方式.一种是IE提出的事件冒泡流,另一种是Netscape提出的事件捕获流.顾名思义,事件冒泡流是从被点击的最小元素逐渐向上索引DOM树,而事件捕获的思想是不太具体的节点先捕捉到事件,然后事件沿DOM树逐渐向下,一直传播到事件的实际目标. 由于老版本浏览器不支持事件

第十三章 事件

事件概念 JS与HTML之间的交互通过事件实现.事件就是文档或浏览器窗口中发生的一些的特定交互瞬间.可以使用侦听器(处理程序)来预定事件.以便事件发生时执行相应的代码. 事件流 事件流 描述的是从页面中接收事件的顺序. I 事件冒泡 IE的事件流叫做事件冒泡,事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,逐级向上传播到较不具体的节点. IE9.FF.chrome.safari冒泡到window对象. <!DOCTYPE html> <html lang="en&

第 9 章 事件对象

JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 的兼容性,开发者总是会做兼容方面的处理.jQuery 在封装的时候,解决了这些问题,并且 还创建了一些非常好用的属性和方法. 一.事件对象 事件对象就是 event 对象,通过处理函数默认传递接受.之前处理函数的 e 就是 event 事件对象,event 对象有很多可用的属性和方法,我们在 JavaScript 课程中已经详细的了解 过这些常用的属性和方法,这里,我们再一次演示一下. //通过处理

第十三章——事件(事件处理程序)

事件就是用户或浏览器执行的某种动作.响应某个事件的函数就是事件处理程序. DOM0级事件处理程序. 使用DOM0级方法指定的事件处理程序被认为是元素的方法.因此这时候的事件处理程序是在元素的作用域中运行的:换句话说,程序中的this引用当前元素. 可以通过this访问元素的任何属性和方法.以这种方式添加的事件处理程序会在事件的冒泡流阶段被处理. DOM2级事件处理程序 和DOM0级方法一样,这里的事件处理程序也是依附在元素的作用域中运行的.使用DOM2级事件处理程序的好处就是可以添加多个事件处理

VC++深入详解——16章:线程同步,事件对象

这章介绍另外:事件对象和关键代码段. 进程相关函数: CreateEvent函数: 第一个参数:安全属性,默认的安全属性为NULL 第二个参数:复位方式, 人工设置为TRUE,自动设置为FALSE, 当为人工设置时,等待事件的线程时,需要resetevent函数来设置其为无型号状态. 第三个参数:初始状态:TRUE为有信号状态,FALSE为无信号状态. 第四个参数:对象名称,NULL为匿名名称. 创建或打开一个命名或匿名的事件对象(也属于内核对象) 返回:返回的是事件对象的句柄. SetEven

JavaScript高级程序设计:第十三章

第十三章 一.理解事件流 事件流描述的是从页面中接收事件的顺序. 1.事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.以下面的HTML页面为例: <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title> </head> <body> <div id="myDiv"&g

第十三章 进程、线程类的实现

                                        第十三章   进程.线程类的实现         多线程是指在一个进程内可以同时运行多个任务,每个任务由一个单独的线程来完成.线程是进程运行的基本单位,一个进程中可以同时运行多个线程.如果程序被设置为多线程方式,可以提高程序运行的效率和处理速度. 多个线程共用一个进程的资源:进程的调度.切换是在10ms的"时钟滴答"定时中断程序里进行.如果一个线程获得CPU,那么在下一个Tick到来前:是不可能被切换出去的

Gradle 1.12用户指南翻译——第二十三章. Java 插件

其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://github.com/msdx/gradledoc/tree/1.12. 直接浏览双语版的文档请访问: http://gradledoc.qiniudn.com/1.12/userguide/userguide.html. 另外,Android 手机用户可通过我写的一个程序浏览文档,带缓存功能的,兼容