位置: 编程技术 - 正文

JavaScript事件 "事件对象"的注意要点

编辑:rootadmin

推荐整理分享JavaScript事件 "事件对象"的注意要点,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

在触发DOM上的某个事件时,会产生一个事件对象event。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。event对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样,可用的属性方法就不一样。不过,所有的事件都会有下表列出的成员。

下面列出了 2 级 DOM 事件标准定义的属性:

bubbles: 返回布尔值,指示事件是否是起泡事件类型。 cancelable: 返回布尔值,指示事件是否可拥可取消的默认动作。 currentTarget: 返回其事件监听器触发该事件的元素。 eventPhase: 返回事件传播的当前阶段。 target: 返回触发此事件的元素(事件的目标节点)。 timeStamp: 返回事件生成的日期和时间。 type: 返回当前 Event 对象表示的事件的名称。

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

initEvent(): 初始化新创建的 Event 对象的属性。 preventDefault(): 通知浏览器不要执行与事件关联的默认动作。 stopPropagation(): 不再派发事件。

this、target、currentTarget

在事件处理程序的内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。如:

由于click事件的目标是btn按钮,所以这三个值是相等的。如果事件处理程序在按钮的父节点(document.body)中,那么这些值则不相同。如:

在这里,this和currentTarget都是document.body,因为事件处理程序是注册到这个元素上的。但是target元素却等于按钮元素,因为它是click事件的真正目标。由于按钮并没有注册事件处理程序,结果click事件就冒泡到了document.body,在那里事件才能得到处理。

JavaScript事件

type

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

要阻止特定事件的默认行为,可以使用该方法。如:

以上代码即屏蔽了网页上全部的a标签超链接功能。要注意的是,只有cancelable属性设置为true的事件,才可以使用preventDefault()来取消其默认行为。

stopPropagation()

立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加到一个按钮的事件处理程序可以调用该方法,从而避免触发注册在document.body上面的事件处理程序。如:

又如:

eventPhase

该属性用来确定事件当前正位于事件流的哪个阶段。

1、如果是捕获阶段则等于1;2、如果是目标对象阶段则等于2;3、如果是冒泡阶段则等于3;如:

又如:

流程大概是:

document.body 捕获阶段 --> btn 目标对象阶段 --> document.body 冒泡阶段

标签: JavaScript事件 "事件对象"的注意要点

本文链接地址:https://www.jiuchutong.com/biancheng/383800.html 转载请保留说明!

上一篇:详解JavaScript中localStorage使用要点(js中的)

下一篇:JavaScript事件类型中UI事件详解

  • 税务基本任务和稽查范围?
  • 电子税务局怎么删除办税员
  • 替票怎么控制数量
  • 叉车折旧年限是多少年
  • 旅行社团队意识
  • 增值税本期应补退税额为负数怎么处理
  • 挂失的存单还有记录吗
  • 出口免税进项税额转出会计分录
  • 抵账房产财务入账
  • 库存商品过期报废需要什么附件
  • 销售利润率如何提高
  • 商业保险可以报税吗
  • 公司活动宣传稿怎么写
  • 发票纳税人识别号错了能重新开吗
  • 关于营改增发票开具的热点问题
  • 注册公司之后需要交社保吗
  • 员工有多处收入怎么申报个人所得税
  • w11系统激活码
  • vue城市列表插件
  • win10专业版怎么改成家庭版
  • 结转净利润到利润分配
  • 2020年计提印花税怎么做账
  • 单位中秋节福利发放物品
  • linux开机出现grub解决方法
  • 城建税的会计账务处理
  • hhcol.exe
  • 十个php高级应用题
  • PHP:imagecreatefromwebp()的用法_GD库图像处理函数
  • 外国政府贷款利息是否征收增值税
  • VUE -- defineExpose
  • php中的正则表达式怎么使用
  • 因质量问题免费赔偿
  • 劳动仲裁的调解款要扣税吗
  • 应收账款在贷方如何平账
  • php验证表单方法有哪些
  • vue 可拖拽
  • head命令中表示输出文件前5行的参数是
  • 企业公章的使用和管理规定
  • 织梦内容页模板修改
  • python如何建立函数
  • opengl全称
  • 罚款支出计入什么费用
  • 工资包含福利费吗
  • 残疾人保障金的工资总额怎么填
  • sql查询树状数据
  • 生产成本怎么结账
  • 进口关税增值税在哪里打印
  • 补贴收入是否缴纳个税
  • 经营性应收项目的减少调增 为什么是减
  • 合伙企业的合伙人有下列情形中的当然退伙
  • 租办公室自己装修可以拆走吗
  • 加工费的进项发票摘要写什么
  • 费用报销单怎样写记账凭证呢
  • 企业收到海河工厂发运的乙材料,并验收入库
  • 对公账户进出账常识
  • 农业机耕属于种植业吗
  • 装修设计费多少合理
  • 进项税额转出在哪里查
  • 国家也通过国有企业利用自己的财政资金
  • linux服务器查找文件命令
  • mysql运行代码
  • 邻居家的wifi隐藏后如何连接
  • 电脑出现系统状态
  • win7回收站路径在哪里
  • xp系统怎么添加ip地址
  • redhat配置
  • winxp程序和功能在哪里
  • win10的outlook在哪
  • cocos2dx 不规则按钮的实现
  • cocos2d schedule
  • jquery控制display属性
  • AngularJS2 与 D3.js集成实现自定义可视化的方法
  • jquery怎么实现单页面
  • unity开发游戏教程
  • python中的全局变量
  • 周炜老婆是干什么的
  • 深圳地税电子税务局
  • 非贸付汇代扣代缴增值税可以抵扣吗
  • 国家税务总局内蒙古分局
  • 北京税务网点
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设