位置: 编程技术 - 正文

学习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事件对象

  • 什么叫汇总征税
  • 开发票价格能否比实际金额高
  • 企业大额融资贷款
  • 企业年度财务报表主要包括
  • 应付福利费直接计入未分配利润
  • 材料加工计入什么科目
  • 代收水电气费加盟
  • 行政单位在建工程入账
  • 同一客户应收应付可以相互抵消吗
  • 应付职工薪酬的账务处理
  • 企业职工福利费扣除标准
  • 买二手车年限久的会怎样
  • 销售商品会计凭证
  • 所得税的税率有哪几种
  • 税务稽查可以不罚款的情形
  • 推广的产品
  • mac系统怎么删除用户
  • windows7iis安装
  • 京东预付卡怎么做账
  • 小黑马下载
  • php composer自动加载
  • linux服务器nfs安装
  • win10移动热点开关自动弹回
  • iphone6splus 充电
  • 经营性支出属于哪个科目
  • 小规模商贸企业增值税税率
  • 销售多余材料计入什么
  • 什么是两免一补的条件
  • 退伍兵自谋职业后被单位辞退怎么办
  • PHP:imagecreatefromwbmp()的用法_GD库图像处理函数
  • php中常量名命名规范
  • 2023前端面试题pdf
  • web前端面试常见问题
  • vue的number
  • 【深度学习】datasets.ImageFolder 使用方法
  • 最新的目标检测算法2020
  • vue修饰词
  • audit install success
  • 资产的账面价值大于计税基础
  • 申请税控盘流程需要几个工作日
  • 租房押金会计分录是什么
  • 投资者减除费用30000
  • mysql同步复制搭建方法指南详细步骤
  • 建账盘存库存商品的分录
  • 坏账损失的定义
  • 零余额账户用款额度年末转入哪个科目
  • 房租收不回来会计分录
  • 检测公司成本科目
  • 公司购买银行理财产品收益交什么税
  • 购买土地的入账价值包括什么
  • 暂估入库成本结转
  • 记账凭证先写借方还是贷方
  • 其他应收款待抵扣税金
  • 企业办增项怎样办理
  • mysql怎么清理干净
  • sql server使用教程(图文)
  • innodb底层实现原理
  • win7 64位系统中使用音乐播放器播放音乐很卡该怎么办?
  • winxp搜索文件内容搜不出来
  • Windows XP/Vista/Windows 7常见蓝屏故障分析
  • win8 更改电脑设置
  • 双系统没有选择
  • linux awk排序
  • win10电脑打开图片文件夹会跳闪
  • win8关机键怎么添加到开始菜单
  • fnthex32.dll
  • linux日志数据种类
  • 四步制作的花
  • 用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦!
  • nodejs xhr
  • Python内置函数的应用操作
  • android开发技术介绍
  • 基于jQuery的AJAX和JSON实现纯html数据模板
  • checkbox批量删除
  • python中import导入模块的方法
  • 陕西省地方税务局公告2017年第2号
  • 税控盘托管给百旺的弊端
  • 智能财税证书含金量
  • 进境邮件补充申请
  • 山东税务自然人注册怎么回事
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设