JS基础-----事件-----事件对象

本文详细解析了事件对象的属性和方法,包括事件的元素、类型、冒泡、取消默认行为等关键信息,以及如何在不同浏览器中兼容处理事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上一篇文章我们了解了事件流是什么,等于我们了解了链条是什么,这一篇文章我们来看看什么是事件对象。事件对象即在触发DOM产生的一个事件对象event。这个对象包含所有与事件有关的信息,包括事件的元素、事件的类型以及其他与特定事件相关的信息。所有浏览器都支持event对象


DOM中的事件对象

event对象有关的属性和方法:

属性/方法类型读/写说明
bubblesBoolean只读事件是否冒泡
cancelableBoolean只读是否可以取消事件的默认行为
currentTargetElement只读

事件处理程序正在处理的事件的元素

defaultPareventedBoolean只读调用preventDefault()----true
detailInteger只读事件相关细节
eventPhaseInteger只读事件处理程序的阶段:1捕获2处于目标3冒泡
preventDefault()Function只读取消事件的默认行为
stopImmediatePropagation()Function只读取消事件的进一步冒泡,同时阻止任何事件处理程序被调用
stopPropagation()Function只读取消事件的进一步冒泡
targetElement只读事件的目标
trustedBoolean只读true:浏览器发生的,false:开发人员用JS创建的
typeString只读被触发的事件类型
viewAbstractview只读与事件关联的抽象视图。

阻止特定事件的默认行为:

  1. cancelable=true
  2. preventDefault() 
  3. stopPropagation()

只有在事件处理程序执行期间,才有event对象


IE的事件对象

  • 使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在
  • 使用HTML特性指定事件处理 程序时,可以通过event变量访问

event对象有关的属性和方法:

属性/方法类型读/写说明
canceBubbleBoolean只读false:默认值;true:取消事件冒泡(===stopPropagation())
returnValueBoolean只读true:默认值;false:取消事件的默认行为(===preventDefault())
srcElementElement只读事件的目标(===target)
typeString只读被触发的事件类型

阻止特定事件的默认行为:

  1. returnValue=false
  2. canceBubble=true

跨浏览器的事件对象

无论是DOM还是IE中的event,可以用一个对象(EventUtil)来兼容两种方式

  1. getEvent()
  2. getTarget()
  3. preventDefault()
  4. stopPropagation()

总结:

无论是什么类型的对象,都包含3种行为:取得对象元素,取消事件的默认行为,阻止事件冒泡

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值