位置: 编程技术 - 正文

JavaScript事件处理的方式(三种)

编辑:rootadmin

推荐整理分享JavaScript事件处理的方式(三种),希望有所帮助,仅作参考,欢迎阅读内容。

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

最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,特此分享到积木网平台供大家参考下!

一、什么是JavaScript事件?

事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。

事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小。说白了,事件是文档或浏览器中发生的特定交互瞬间!

通过使用JavaScript,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。

二、事件流

事件流就是描述了页面中接受事件的顺序,在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐,出现了一个坑爹的情况,那就是他们对事件流的解释出现了两中截然相反的定义。也就是我们所熟悉的:IE的事件冒泡,Netscape的事件捕获。先来一张图,简要的看下结构:

1、事件冒泡

事件冒泡即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的节点(文档)。拿上面的图来说明,就是当点击text部分时,先由text处的元素接收,然后逐级传播至window,即执行6-7-8-9-的过程。

2、事件捕获

事件捕获即事件最早由不太具体的节点接收,而最具体的节点最后接收到事件。同理,在上面的模型中,就是点击text部分时,先由window接收,然后逐级传播至text元素,即执行1-2-3-4-5的过程。

具体在代码中怎样表现呢?后面给出!

三、Javascript事件处理程序的3种方式

产生了事件,我们就要去处理他,Javascript事件处理程序主要有3种方式:

1、HTML事件处理程序

即我们直接在HTML代码中添加事件处理程序,如下面这段代码:

JavaScript事件处理的方式(三种)

从上面的代码中我们可以看出,事件处理是直接嵌套在元素里头的,这样有一个毛病:就是html代码和js的耦合性太强,如果哪一天想要改变js中showmsg,那么不但要再js中修改,还需要到html中修改,一两处的修改我们能接受,但是当你的代码达到万行级别的时候,修改起来就需要劳民伤财了,所以,这个方式我们并不推荐使用。

2、DOM0级事件处理程序

即为指定对象添加事件处理,看下面的一段代码:

从上面的代码中,我们能看出,相对于HTML事件处理程序,DOM0级事件,html代码和js代码的耦合性已经大大降低。但是,聪明的程序员还是不太满足,期望寻找更简便的处理方式,下面来看第三种处理方法。

3、DOM2级事件处理程序

DOM2也是对特定的对象添加事件处理程序,但是主要涉及到两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(是否在捕获阶段处理事件),看下面的一段代码:

这里我们可以看到,在添加删除事件处理的时候,最后一种方法更直接,也最简便。但是马海祥提醒大家需要注意的是,在删除事件处理的时候,传入的参数一定要跟之前的参数一致,否则删除会失效!

四、事件冒泡和事件捕获的流程与区别

说到这里,再给大家来一点代码来说明下事件冒泡和事件捕获的流程,同时也让大家能看出二者的区别:

运行上面的代码,点击子元素的时候,我们会发现,执行的先后顺序是:父节点捕获--子节点捕获--子节点冒泡--父节点冒泡。从这个例子中,大家也就明白了,另外,DOM2级事件规定事件包括三个阶段:

1、事件捕获阶段;

2、处于目标阶段;

3、事件冒泡阶段。

首先是捕获,然后处于目标阶段(即来到事件的发出位置),最后才是冒泡,不科学的是,居然木有DOM1级事件处理程序,大家注意下,别闹出笑话了!

五、补充

1. IE事件处理程序也对应有两个方法:attachEvent()添加事件,detachEvent()删除事件,这两个方法接收相同的两个参数:事件处理程序名称与事处理函数。这里为什么没有布尔值呢?因为ie8以及更早的版本只支持事件冒泡,所以最后一个参数默认的相当于false来处理!(支持IE事件处理程序的浏览器有IE,opera)。

2. 事件对象是用来记录一些事件发生时的相关信息的对象,但事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!

以上所述是小编给大家介绍的JavaScript事件处理的方式(三种),希望对大家有所帮助!

JS中使用apply、bind实现为函数或者类传入动态个数的参数 为纪念年没写blog,第一篇博文就以这样一个有趣的窍门开始吧-___-在ES5中,当我们调用一个函数时,如果要传入的参数是根据其他函数或条件判断生成

AngularJS实现textarea记录只能输入规定数量的字符并显示 AngularJS是一个MV*框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展HTML的功能,提供动态数据绑定

Bootstrap表单组件教程详解 表单常见的元素主要包括:文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。下面是不同的bootstrap版本:LESS:forms.lessSASS:_forms.scssbootstrap仅

标签: JavaScript事件处理的方式(三种)

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

上一篇:Bootstrap每天必学之工具提示(Tooltip)插件(bootstrap怎么学)

下一篇:Javascript 基础---Ajax入门必看(javascript基础编程)

  • 流动资产属于经营资产还是得经营资产
  • 纸质发票红冲操作流程
  • 企业对公账户钱怎么取出来
  • 出差飞机票报销标准
  • 小规模季度超过45万了怎么缴纳
  • 深圳一般纳税人资格查询
  • 企业清算的种类
  • 支票撕碎了怎么办
  • 发生非正常损失的购进货物不准予抵扣的增值税
  • 增值税发票作废如何处理
  • 会计凭证如何填写
  • 事业单位个税可以抵扣吗
  • 机票电子行程单和发票的区别
  • 应收账款减值后可以转回吗
  • 简易计税算税收优惠吗
  • 公司购买工装计入什么费用
  • 技术转让收入是指当事人履行
  • 商品税目编码表查询
  • 股东分红个人所得税怎么申报
  • 何时进行文化事业建设
  • 本年利润结转到利润分配是每月都结转还是年底结转
  • 冲销暂估入库的会计分录
  • 个税退手续费要多久到账
  • 华硕主板bios更新后开不了机
  • 如何处理库存差异问题
  • PHP:proc_get_status()的用法_命令行函数
  • 股权划转是否涉及印花税
  • 社保通过银行缴纳
  • html怎么嵌入js
  • php出现错误代码怎么办
  • php绘制图片
  • lsscsi命令详解
  • 利润表中其他收益是什么
  • 保险佣金个人所得税怎么申报
  • 记账凭证银行利息入息
  • 承税汇票个人能用吗
  • 营销策划协议
  • sql server 2008全称
  • 使用sql server查询不到会返回什么
  • 备用金用发票核销去哪核销
  • 商业一般纳税人辅导期截止时间
  • 公司注销前账务怎么处理好
  • 个人去税务局开劳务发票要交多少税
  • 捐赠支出税前扣除比例
  • 公司开业前期费用谁出
  • 预收账款怎么用
  • 当月没有凭证还能报税吗
  • 汽车装修费计入哪个科目
  • 运费少给怎么办
  • 去年漏记了收入,可以记今年吗
  • 企业所得税汇算表
  • 代开发票的弊端是如何体现的?
  • 中标违约保证金怎么退
  • 小规模纳税人的认定标准是什么
  • 拆借 拆放
  • 企业购买的结构性存款怎样做账
  • 买给员工吃的零食内容怎么写
  • MySQL timestamp的类型与时区实例详解
  • mysql 5.7.22安装教程
  • win8系统怎样查看本机的ip地址
  • win10系统打印机脱机状态怎么恢复正常打印
  • win8怎么关电脑
  • win10可以关闭的功能
  • windows免费升级win10
  • iptables用法
  • 如何自定义win键
  • Win10更新KB3156421补丁后出现设备运行缓慢现象的解决方案
  • 【学习ARToolkit小记之初】 ARToolkit在VS2010(Win7 64位)下的配置及第一个开发程序的编译与运行
  • 如何在手机上直接买彩票
  • vs开发web教程
  • android webapi调用
  • jquery中validate
  • 外经证的有效期是多久
  • 季度申报怎么更正
  • 丰台和朝阳中间是哪里
  • 枸杞税收分类是什么
  • 沧州市养老保险局官网
  • 税务稽查工作底稿属于什么证据
  • 河南网上报税流程图
  • 车辆保险代收车船税会计分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设