javaScript事件学习小结（四)事件的公共成员（属性和方法)

相关阅读：

Java脚本语言事件学习小结（五)js中事件类型之鼠标事件

//www .JB 51。net/article/86259。html文件的后缀

Java脚本语言事件学习小结（一)事件流

//www .JB 51。net/article/86261。html文件的后缀

爪哇岛描述语言事件学习小结（四)事件的公共成员（属性和方法)

//www .JB 51。net/article/86262。html文件的后缀

Java脚本语言事件学习小结（二)js事件处理程序

//www .JB 51。net/article/86264。html文件的后缀

Java脚本语言事件学习小结（三)js事件对象

一、事件对象的公共成员

1、DOM中的事件的公共成员

事件对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法不一样。但是唐中所有事件都有以下公共成员。

答：对比当前目标和目标

在事件处理程序内部，对象这始终等于当前目标的值，而目标则只是包含事件的实际目标。

举例：页面有个按钮，在正文（按钮的父节点)中注册点击事件，点按钮时点击事件会冒泡到身体进行处理。

正文输入id=' BTN '类型='按钮'值='点击'/脚本文档。尸体。onclick=function(event){ console。日志('正文中注册的点击事件');控制台。日志(' this===事件。当前目标？(这===事件。currentTarget))；//真控制台。日志(' CurrentTarget===文档。尸体？(事件。当前目标===文档。正文))；//真控制台。日志('事件。target===文档。getelementbyid(' BTN '？)(事件。target===文档。getelementbyid(' BTN ')；//true }/脚本/正文运行结果为：

b、通过类型属性，可以在一个函数中处理多个事件。

原理：通过检测事件类型属性，对不同事件进行不同处理。

举例：定义一个处理者函数用来处理3种事件：点击，鼠标悬停，鼠标移出。

正文输入id=' BTN ' type=' button ' value=' click '/script var handler=function(事件){ switch(事件。type){ case ' click ' : alert(' clicked ')；打破；案例“鼠标悬停”:事件。目标。风格。背景颜色='粉色'；打破；案例“鼠标移出”:事件。目标。风格。background COlOr=}};var BTN=文档。getelementbyid(' BTN ')；BTN . onclick=handlerbtn . onmouseover=handlerbtn . onmouseout=handler/脚本/正文运行效果：点击按钮，弹出框。鼠标经过按钮，按钮背景色变为粉色；鼠标离开按钮，背景色恢复默认。

c、停止传播()和stopImmediatePropagation()对比

同：停止传播()和stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。

异：二者的区别在于当一个事件有多个事件处理程序时，停止即时传输()可以阻止之后事件处理程序被调用。

举例：

正文输入id=' BTN '类型='按钮'值='点击'/脚本var BTN=文档。getelementbyid(' BTN ')；btn.addEventListener('click ')，function(event){ console。日志(‘但是点击收听一个’)；//事件。stopperpagation()；//取消注释查看效果//事件。stopmenttepropagation()；//取消注释查看效果}，false)；btn.addEventListener('click '，function(){ console。日志('按钮点击收听两次');}，false)；文件。尸体。onclick=function(event){ console。日志('正文已单击')；}/脚本/正文运行效果：

事件阶段

事件阶段值在捕获阶段为1,处于目标阶段为2,冒泡阶段为3。

例子：

body input id=' BTN ' type=' button ' value=' click '/script var BTN=document . getelementbyid(' BTN ')；BTN . onclick=function(event){ console . log(' button DOM0级别的方法添加事件处理程序eventPhase的值为？event . event phase)；} BTN。addEventListener ('click ')，function(event){ console . log(' button DOM2)级别的方法添加了一个事件处理程序，当addEventListener的第三个参数为true时，eventPhase值是多少？event . event phase)；}，真)；eventPhase的值是？当btn.addEventListener ('click ')，function(event){ console . log(' button DOM2)级别的方法添加了一个事件处理程序，而addEventListener的第三个参数为false时。event . event phase)；}，false)；在document . body . addevent listener(' click '、function(event){ console . log(' body ')上添加事件处理程序，捕获阶段的eventPhase值为？event . event phase)；}，真)；在document . body . addevent listener(' click '、function(event){ console . log(' body ')上添加事件处理程序，冒泡阶段的eventPhase值为？event . event phase)；}，false)；/脚本运行效果：

2.工业工程活动的公众成员。

和DOM一样，IE中事件的属性和方法会随着事件类型的不同而不同，但其中有些是所有对象的公共成员，这些成员大多有对应的DOM属性或方法。

以上是边肖介绍的javaScript事件的学习总结。(4)事件的公共成员(属性和方法)的相关知识，希望对大家有所帮助。如果你有任何问题，请给我留言！