位置: 编程技术 - 正文

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方法详解

  • 小型微利企业所得税计算公式2023
  • 房产契税是怎样计算的
  • 城市维护建设税的计税依据是什么
  • 国家税务登记证是什么样子的
  • 车辆使用费属于什么税收分类
  • 外资研发中心认定标准
  • 土地交易服务费属于非税收入吗
  • 公司开普票和专票哪个好
  • 人力资源交哪些税费
  • 企业清算过程中应收应付的处置
  • 仓储企业的成本有哪些
  • 年末发票
  • 应收款确认坏账分录
  • 资产减值损失进利润表吗
  • 事业单位过节发东西
  • 没有合作会怎么样
  • 个人到税务局怎么开增值税普通发票
  • 事业单位去年的年假今年可以休吗
  • 外管证开了未用怎么办
  • 苏州工会经费减半政策
  • 房地产土地成本计算公式
  • 税收筹划要注意哪些问题
  • 建筑企业异地预缴增值税流程
  • 哪些发票公司可以抵扣
  • 办劳务发票需要什么资料
  • 我公司以房产土地为主
  • 增值税减免算什么费用
  • 无法加载响应数据 对于预检请求没有可显示的内容
  • 税务局查账补交所得税怎样处理
  • 小规模开普票后怎么报增值税
  • PHP:session_encode()的用法_Session函数
  • 电脑网络提示ip地址错误怎么办
  • mac桌面的东西怎么放回去
  • 进项发票抵扣途中怎么办
  • bhvc.exe
  • 出口企业如何确认增值税收入
  • php内核剖析
  • 企业废业什么意思
  • 企业所得税汇算清缴账务处理
  • php查询语句怎么写
  • session和viewstate
  • angular 初学者快速上手教程
  • vue中的icon
  • 会计分录结转进项怎么算
  • 房地产企业预缴增值税会计处理
  • 电子税务怎么绑定开票员信息
  • 织梦专题页模板
  • 织梦建站详细教程
  • 员工个人所得税申报方式选哪个
  • 汽车保险费计入应付账款还是其他应付款
  • 出售其他债权投资产生的收益为什么计入留存收益
  • sql server数据表
  • 给个体工商户打工受伤怎么办
  • mysql如何开启
  • 信用减值损失和资产减值损失的区别
  • 外购商品用于宣传需要缴纳增值税吗
  • 收到采购发票如何录入系统
  • 公司购车购置税可以抵扣吗
  • 印花税 不足
  • 材料按计划成本计价下,外购材料结算
  • mysql中数据类型为是否
  • sql server 错误
  • mysql5.7解压版安装步骤
  • navicat查询结果下面输出栏如何关闭
  • 创建软链接 linux
  • rds是啥
  • win8桌面图标变大了怎么调小
  • win7系统怎么卸载显卡驱动
  • windows10用法
  • node modules干嘛的
  • 两个js文件互相取变量
  • unity安装进度条不动
  • 如何保养铜香炉
  • js实现拖拽功能
  • 不用税控盘可以勾选发票吗
  • 纳税人办理汇算清缴
  • 购销合同印花税最新政策2023
  • 红色通知字体
  • 土地增值税扣除项目金额怎么计算
  • 营业税发票丢失能否开增值税普票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设