位置: 编程技术 - 正文

学习JavaScript事件流和事件处理程序

编辑:rootadmin

推荐整理分享学习JavaScript事件流和事件处理程序,希望有所帮助,仅作参考,欢迎阅读内容。

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

本文全篇介绍了JavaScript事件流和事件处理程序,分享给大家供大家参考,具体内容如下

一、事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流。

二、事件冒泡

即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。如:

当点击了页面中的div元素,那么这个click事件会按照如下顺序传播:

div元素 body元素 html元素 document对象

三、事件捕获

事件捕获的思想是最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达目标之前捕获它。

当点击了页面中的div元素,那么这个click事件则会按照如下顺序传播:

document对象 html标签 body标签 div标签

虽然规范要求事件应该从document对象开始传播,但浏览器一般都是从window对象开始捕获事件的。因为老版本浏览器不支持,所以一般都使用事件冒泡。

四、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

在DOM事件流中,实际的目标在捕获阶段不会接收事件。就是说在捕获阶段,事件从document到html再到body后就停止了。下一个阶段是“处于目标”阶段,于是事件在div中发生,并在事件处理中被看成是冒泡阶段的一部分。然后,冒泡阶段发生。IE8及更早的版本不支持DOM事件流,浏览器在捕获阶段触发事件对象上的事件,结果就是有两个机会在目标对象上面操作事件。

五、事件处理程序

事件就是用户或浏览器自身执行的某种动作;事件处理程序(或事件侦听器)就是响应某个事件的函数。事件处理程序的名字以“on”开头,如onload、onclick等。

六、HTML事件处理程序

学习JavaScript事件流和事件处理程序

若要在按钮被单击时执行一些js代码,可以这样编写:

注意:不能在其中使用未经转义的HTML语法字符。

也可以调用在页面中其他地方定义的脚本:

事件处理程序中的代码在执行时,有权访问全局作用域中的任何代码。

这样使用会创建一个封装着的元素属性值的函数。这个函数有一个局部变量event,也就是事件对象:

其中,this值等于事件的目标元素,如:

HTML事件处理程序存在众多问题,所以应该使用js指定的事件处理程序

七、DOM0级事件处理程序

要使用js指定事件处理程序,首先必须取得一个要操作的对象的引用。

每个元素都有自己的事件处理程序属性,这些属性通常全部小写,如onclick。如:

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,这时候的事件处理程序是在元素的作用域中运行的;也就是this引用当前元素:

以上述这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

删除通过DOM0级方法指定的事件处理程序:

八、DOM2级事件处理程序

addEventListener()

该方法接收三个参数:要处理的事件名、事件处理程序函数和布尔值;布尔值如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。如:

还可以为该按钮添加多个事件处理程序,如:

removeEventListener()

大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样就可以最大限度地兼容各种浏览器。

标签: 学习JavaScript事件流和事件处理程序

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

上一篇:javascript产生随机数方法汇总(javascript产生随机整数随机性强)

下一篇:理解JavaScript事件对象

  • 逆回购会不会亏本金
  • 个税分类所得税率
  • 增加固定资产原值账务处理
  • 库存商品发出汇总表
  • 企业出现亏损的原因有哪些
  • 什么情况下征税
  • 代开运输发票会不会造成重复征税
  • 去年结转本年利润数字错了今年能更改吗
  • 上期计提的费用是什么
  • 房屋预售缴款怎么交
  • 税率调整后之前签的合同用变更吗
  • 员工离职后收取客户钱款
  • 资源税征收管理纳税期限
  • 代扣代缴个人所得税手续费是否缴纳增值税
  • 会计怎么避免坐牢
  • 购买健身器材需要注意什么
  • 固定资产取得方式A04代号
  • 报税没有印花税怎么处理
  • 网络科技公司会计核算及账务处理
  • 研发企业退税
  • 来的货比合同金额多怎么申报印花税?
  • 质保金付款时怎么付
  • 没有成本票怎么做成本
  • 筹建期间发生的费用计入什么科目
  • 公司解散实收资本退还怎么写
  • 远期结汇账务处理分录
  • 企业转让销售配额怎么算
  • 员工租赁宿舍开几个点发票
  • linux中的util值很高
  • windows7旗舰版最新版本
  • 银行存款调账怎么调
  • 会计科目在建工程包括哪些
  • 交际应酬性支出是什么
  • 生产成本包括哪些项目
  • 车船使用税凭证还要过户吗怎么办
  • 土地出让金的收费标准 60%
  • 2022最新廉洁警示语句
  • 所有非批扣和所有批扣是什么意思
  • smarty模板注入
  • 元素垂直水平居中方式
  • idea如何导入sql文件
  • Laravel5权限管理方法详解
  • look 查明
  • 企业应收账款的主要内容
  • 不需要开发票的现金收入怎么做内账?
  • 电影院属于什么经济类型
  • 小规模纳税人与一般纳税人的区别表现在小规模纳税人
  • 个体工商户季度超过9万怎么交税
  • 购入的设备用于研发怎样记账
  • 分配人工费的会计分录
  • 固定资产清理的金额怎么算
  • 境外个人给境内个人汇款什么名义申报
  • 公司向个人租赁房屋办公要交税吗?
  • 电脑配件入账
  • 营销策划服务费属于什么服务
  • 固定资产的折旧标准
  • 待摊费用年底能够有余额么
  • 新手必看教程
  • 大额往来款项的认定
  • 报销程序是什么
  • 建筑业简易征收税率5%
  • 固定资产管理需要什么专业
  • sql语句基础题及答案
  • centos gogs
  • 在Linux操作系统中哪些命令可以正确关闭系统防火墙
  • GHOST XP 安装教程
  • linux分区方案lvm
  • win8如何设置vpn Win8如何建立VPN连接操作指南
  • [置顶]公主大人接下来是拷问时间31
  • win7怎么设定关机时间
  • node.js中的http.response.end方法使用说明
  • 批处理 重命名
  • unity3d快捷键
  • shell提示
  • 利用python中的scikit-learn对疫情数据挖掘
  • javascript基于什么的语言
  • 广东每年交多少税给国家
  • 推进落实类似的词语
  • 上饶二手房契税
  • 税务ukey版商品编码怎么添加
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设