当前位置:Gxlcms > JavaScript > 巧谈javaScript事件中event的两个公共成员:属性和方法

巧谈javaScript事件中event的两个公共成员:属性和方法

时间:2021-07-01 10:21:17 帮助过:2人阅读

DOM中的event的公共成员包括属性和方法,触发的事件类型不一样,可用的属性和方法不一样。但是,DOM中所有事件都有公共成员。这篇文章主要介绍了javaScript事件中event的公共成员(属性和方法)非常不错,具有参考借鉴价值,需要的朋友可以参考下

一、事件对象的公共成员

1、DOM中的event的公共成员

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

a、对比currentTarget和target

在事件处理程序内部,对象this始终等于currentTarget的值,而target则只是包含事件的实际目标。

举例:页面有个按钮,在body(按钮的父节点)中注册click事件,点按钮时click事件会冒泡到body进行处理。

运行结果为:

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

原理:通过检测event.type属性,对不同事件进行不同处理。

举例:定义一个handler函数用来处理3种事件:click,mouseover,mouseout。

运行效果:点击按钮,弹出框。鼠标经过按钮,按钮背景色变为粉色;鼠标离开按钮,背景色恢复默认。

c、stopPropagation()和stopImmediatePropagation()对比

同:stopPropagation()和 stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。

异:二者的区别在于当一个事件有多个事件处理程序时,stopImmediatePropagation()可以阻止之后事件处理程序被调用。

举例:

运行效果:

d、eventPhase

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

例子:

运行效果:

2、IE中event的公共成员

IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同,但是也有一些是所有对象都有的公共成员,且这些成员大部分有对应的DOM属性或方法。

以上所述是小编给大家介绍的javaScript事件学习小结(四)event的公共成员(属性和方法)的相关知识,希望对大家有所帮助,如果大家有疑问欢迎给我留言!

相关推荐:

  • JavaScript事件学习小结(二)js事件处理程序

  • JavaScript事件学习小结(一)事件流

  • JavaScript事件学习小结(五)js中事件类型之鼠标事件

  • JavaScript事件学习小结(三)js事件对象

以上就是巧谈javaScript事件中event的两个公共成员:属性和方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行