位置: 编程技术 - 正文

javascript事件绑定学习要点

编辑:rootadmin

推荐整理分享javascript事件绑定学习要点,希望有所帮助,仅作参考,欢迎阅读内容。

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

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。

一 传统事件绑定的问题

传统事件绑定中的内联模型不做讨论,基本很少去用。先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数。传统绑定如:

问题一:一个事件处理函数触发两次事件

如果一个页面有两个或者多个js,并且第一个js是第一个程序开发的,第二个js是第二个程序员开发的。第一个window.onload被覆盖了,如

结果只是打印了 Mr.lee

其实是有办法解决这个问题的,看下面这两种形式。a:

b:

所以解决办法有了。

问题二:事件切换器切换一个id为box的div,让里面的背景red与blue直接切换,并且切换之前弹框一次,如:

上面的代码虽然实现了切换功能,但是弹框只执行了一次。

按照上面的代码出现了注释中的错误,解决的办法如下:

二 W3C事件处理函数addEventListener()与removeEventListener()W3C事件处理函数两个,addEventListener()与removeEventListener()。

//W3C自带的两个添加事件和删除事件1.覆盖问题,解决

2.相同函数屏蔽的问题,解决

3.是否可以传递this,解决例子1:

例子2:

4.添加一个额外的方法,会不会被覆盖,或者只能执行一次,解决

综上所述:W3C是比较完美的解决了这些问题,非常好用,但是IE8和之前的浏览器并不支持,而是采用了自己的事件,当然IE9已经完全支持了W3C的这两个事件处理函数。

W3C可以设置冒泡和捕获方式。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。事件的传播是可以阻止的:在W3c中,使用stopPropagation()方法在IE下设置cancelBubble = true;

三.IE事件处理函数

attachEvent()和detachEvent()IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的参数:事件名称和函数。

在使用这两组函数的时候,先把区别说一下:1.IE不支持捕获,只支持冒泡;2.IE添加事件不能屏蔽重复的函数;3.IE中的this指向的是window而不是DOM对象。4.在传统事件上,IE是无法接受到event对象的,但使用了attchEvent却可以,但有些区别。

1.覆盖问题,解决了,但有不同,结果是Mrs.Lee,Mr.Lee,最后是Lee

javascript事件绑定学习要点

2.相同函数屏蔽的问题,未解决。

3.是否可以传递this,不能,this指的是window。需要用call方法。

下面还有办法就是通过window.event.srcElement。代码如下:

4.添加一个额外的方法,会不会被覆盖,或者只能执行一次,解决。

在传统绑定上,IE是无法像W3C那样通过传参接受event对象,但是使用attachEvent()却可以。

跨浏览器的兼容

跨浏览器添加事件

跨浏览器移除事件

跨浏览器获取目标对象

调用方式:

四.事件对象的其他补充

relatedTarget事件

w3c中的一个relatedTarget事件。例如:

IE提供了两组分别用于移入移出的属性fromElement和toElement,分别对应mouseover和mouseout。

PS:fromElement和toElement如果分别对应相反的鼠标事件,没有任何意义。

剩下要做的就是跨浏览器兼容操作:

屏蔽跳转操作

取消事件的默认行为有一种不规范的做法,就是返回false。

PS:虽然return false;可以实现这个功能,但是有漏洞。第一:必须写到最后,这样导致中奖的代码执行后,有可能执行不到return false;第二:return false 写到最前那么之后的自定义操作就失效了。所以最好的办法应该是在最前面就阻止默认行为,并且后面的代码还可以执行。

那么跨浏览器的兼容:

右键菜单contextmenu兼容:

PS:contextmenu事件很常用,这直接导致浏览器兼容性较为稳定。

卸载前事件:beforeunload这个事件可以帮助在离开本页的时候给出相应的提示,“离开”或者“返回”操作。

鼠标滚轮(mousewheel)和DOMMouseScroll用于获取鼠标上下滚轮的距离

PS:通过浏览器检测可以确定火狐只执行DOMMouseScroll。

DOMContentLoaded事件和readystatechange事件

DOMContentLoaded事件和readystatechange事件,有关DOM加载方面的事件。

javascript中call apply 与 bind方法详解 在JavaScript中,call、apply和bind是Function对象自带的三个方法,本文将通过几个场景的应用,来详细理解三个方法。call()call()方法在使用一个指定的this值和

JavaScript中setTimeout和setInterval函数的传参及调用 如何向setTimeout、setInterval传递参数看如下代码:varstr='aaa';varnum=2;functionauto(num){alert(num);}setTimeout('auto(num)',);这样写是可以正常工作的,但是如其说这

举例说明JavaScript中的实例对象与原型对象 首先声明:javascript中每个对象都有一个constructor属性和一个prototype属性。constructor指向对象的构造函数,prototype指向使用构造函数创建的对象实例的原型

标签: javascript事件绑定学习要点

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

上一篇:javascript创建对象、对象继承的实用方式详解(js创建对象的方法有哪些)

下一篇:javascript中call apply 与 bind方法详解

  • 取得发票与实际业务不符怎么办
  • 以前年度损益调整结转到未分配利润
  • 主营业务成本的数据从哪里来的
  • 什么情况下核定征收转为查账征收
  • 收到扶贫款怎么做会计分录
  • 投资款转账没备案怎么办
  • 自主研发全流程
  • 小规模纳税人的增值税账务处理
  • 土地使用税什么意思
  • 股东实物分红账务怎么做
  • 工业企业提供劳务收入会计分录
  • 长期股权投资稀释
  • 报废车辆残值收入交多少增值税
  • 未分配利润应该在借方还是贷方??
  • 对方增值税发票丢失怎么办
  • 生产用水的会计分录
  • 股权交易要不要缴纳印花税?
  • 哪些房产免纳房产税
  • 福利费用不用计提
  • 股东投资设备一定要评估吗
  • 领备用金时会计怎么做账
  • 申报表利润总额与财务报表利润总额
  • 填写报关单需要什么资料
  • 小企业流动资产一般是多少
  • 福利费的进项税怎么做账
  • 应付票据包括哪些票
  • php调用sql
  • 电脑xmp是啥
  • vue 高德地图 窗体
  • 计提五险一金的分录怎么写
  • 预收预付不一致什么意思
  • PHP:pg_num_rows()的用法_PostgreSQL函数
  • 收到汽车维修费的会计分录
  • 公司向法人借款的借条怎么写
  • php预处理查询
  • 微信小程序在哪里打开
  • 中国传统节日大概有多少
  • php实现上传图片功能
  • 代管资金如何做凭证
  • 帝国cms如何调用网络
  • 事业单位是怎样向上申请招人的
  • 长期待摊费用摊销会计分录
  • 职工薪酬包括哪些应如何计算
  • 金税盘的维护费怎么报税
  • 转让不动产怎么计算增值税
  • 非盈利社会团体法人
  • 净利润递延所得税
  • 出口退税 账务处理
  • 非正常损失的进项税
  • 临时账户过期了怎么办
  • 企业为什么一定要给员工缴纳社保
  • 自行研发的无形资产入账价值
  • 查账征收的个体户怎么交个税
  • 未取得合法支付凭据和与本单位无关的收入
  • MySQL Index Condition Pushdown(ICP)性能优化方法实例
  • sql server key
  • bios密码忘记了取电池不管用
  • win2003 enterprise序列号
  • Windows Server 2008制作密码重设盘
  • 出现闪退该怎么办
  • SsAAD.exe - SsAAD是什么进程
  • itunes清理iphone垃圾
  • win7系统如何将插孔设置为ac97前面板
  • linux在实际工作中的应用
  • bootstrap怎么用
  • opengl快速入门
  • jquery 插件写法
  • 参数传递的方式有几种?有什么区别?
  • android drawable 圆角锯齿
  • js获取当前时间
  • jquery dom对象
  • 简单又实用的
  • javascript中的document
  • Python循环遍历的题
  • 安卓白屏问题有哪些
  • jQuery中通过ajax调用webservice传递数组参数的问题实例详解
  • 增值额未超过扣除项目金额20%是什么意思
  • 2022年各大省份录取分数线
  • 武汉二手房交易信息
  • 小规模税控盘全额抵扣怎么做分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设