位置: 编程技术 - 正文

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

  • 所得税费用的计提
  • 从公司提款需要交税?
  • 税后工资怎么查
  • 银行商业承兑汇票到期怎么兑现
  • 已开发票查询不到怎么回事
  • 会计凭证 借贷
  • 购销合同印花税优惠政策
  • 销售使用过未抵扣进项税额的货运汽车
  • 个人住房转让纳税标准
  • 由收款人签发,经付款人承兑
  • 分次缴纳的注册资本入什么科目?
  • 无使用价值的存货属于资产吗
  • 长期股权投资成本法初始计量
  • 发票开具丢失后如有罚款怎么处理?
  • 年会费用的会计分录
  • 企业交城建税的分录
  • 旅行社会议主持开场
  • 怎么计算房地产公司可以贷款多少
  • 税务机关及其工作人员未按办税事项最多跑一次
  • 餐饮装修费用计入什么科目
  • 一般纳税人转为小规模2022政策
  • 房地产停车场属于公共配套设施吗
  • 计入成本的费用包括
  • 增值税包括土地整治收入吗
  • 小企业会计准则会计科目表
  • 净资产和净资本和营业收入
  • 库存商品售价
  • 免征税收入和不征税收入的区别
  • win11打开设置
  • 电子专用发票没有发票代码
  • 资产利润率和资本利润率监管标准
  • 电脑医生怎么卸载
  • 将自产的应税消费品用于非应税项目
  • 潘塔纳尔湿地的成因
  • php的数据类型主要有哪几种?
  • 仓储服务和不动产租赁
  • phpsubstr_replace
  • php请求https
  • 财产清查两种制度
  • 其他综合收益什么类科目
  • php获取浏览器ua
  • 销售费用处理不包括哪些
  • 一般股份支付的确认计量及帐务处理怎么做?
  • 营业外支出账户核算的主要内容有
  • 工会经费计入什么项目流量表
  • 购买电脑一次性计入费用吗合理吗
  • 商场扣钱犯法
  • 给员工发工资时要交税吗
  • 先收款后给发票
  • 存货过期处理怎么做分录
  • 交纳增值税的账务处理PPT
  • 快递公司的会计都需要做什么
  • 哪些合同需要缴税
  • 利润太高,如何调产品收发存
  • 企业贷款利息费用会计分录
  • 公司物资借用手续
  • 收到商业汇票计什么科目
  • 技术开发免税收入怎么算
  • 工程收据怎么开表格
  • 其他业务收入与其他业务成本的关系
  • 登记银行存款日记账的实训心得
  • 待摊费用怎么做凭证科目
  • MySQL删除重复数据只保留一条
  • kvm虚拟化网络配置
  • 比较常见的成语有哪些
  • win8 怎么样
  • Ghost XP SP3 YN8.0装机版 (雨林木风)
  • 通过u盘安装win11
  • linux cp的用法
  • win8资源管理器未响应
  • linux的截图工具
  • opengl画矩形函数
  • cocos屏幕适配方案
  • 细说javascript
  • unity 角色
  • super函数python
  • android高级开发实战------ui、ndk与安全
  • 税务投诉撤销申诉
  • 固定资产评估增值的税务处理
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设