全国咨询热线:18720358503

分销微信小程序开发_深化了解在JS中通过四种设

类别:企业动态 发布时间:2021-01-12 浏览人次:

深入理解在JS中通过四种设置事件处理程序的方法       所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式

所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式:

第一种方式(HTML标签属性):

 input type="button" id="btn1" value="测试" / 

上面的代码是通过设置HTML标签属性为给button 添加了点击事件,当点击button 按钮时会弹出这个button的id,即btn1。

这种通过HTML属性来注册事件处理程序是一个例外。它们被转换为能存取全局变量的顶级函数而非任何本地变量。由于历史的原因,它们运行在一个修改后的作用域链中。通过HTML属性定义的事件处理程序能像本地变量一样使用目标对象、容器对象(form)对象和document对象的属性。它会被浏览器转换为类似如下的代码:

 function (event){
 with(document){
 with(this.form||{}){
 with(this){
 /*具体的事件处理代码*/
}

关于with的用法,可以自行查阅,这里后面有文章讲解。读者先自行了解一下。提供一个连接()

这种方式现在已经不推荐使用。

第二种方式(调用函数)

 input type="button" id="btn2" value="测试" / 
 script type="text/javascript" 
 function test(){
 alert(this.id);
 /script 

这段代码弹出来的是undefined。

这种设置方式是通过调用全局函数来进行的,这时this指向的是window,而非这个button的调用者,可以通过输出console.log(this==window);来进行验证

第三种方式(调用函数)

 input type="button" id="btn3" value="测试" / 
 script type="text/javascript" 
 var btn3 = document.getElementById("btn3");
 btn3.onclick = function () {
 alert(this.id);
 /script 

这段代码弹出来的是btn3。

这种事件处理程序在事件目标上定义,所以它们作为这个对象的方法来调用(但是下面在IE里面有个例外)。这就是说在事件处理程序内,this关键字指的是事件目标。

当使用addEventListener()注册时,调用的处理程序使用事件目标作为它们的this值。但是对于还用attachment()注册的处理程序作为函数调用,它们的this值是全局(window)对象。就是说的第四中方式

第四种方式(通过addEventListener和attachment):

 input type="button" id="btn3" value="测试" / 
 var btn = document.getElementById("btn3");
 var handler = function () { console.log(this.id); };
 if (btn.addEventListener) {
 console.log("addEventListener");
 btn.addEventListener("click", handler, false);
 else if (btn.attachEvent) {//IE9之前的版本
 console.log("attachEvent");
 btn.attachEvent("onclick",handler);
 }

在IE5-IE8 版本输出的是undefined。(此时调用的是attachement)

IE9以后的版本输出的btn3.(修复了上面的问题,增加了通用的addEventListener)。

如果想修复IE5-8里面的那个问题,可以使用下面的方法。

*target:目标对象,button之类的
*type:"click"字符串事件名称,无需带on
*handler:调用的处理程序
function addEvent(target,type,handler){
 if (target.addEventListener) {
 target.addEventListener(type, handler, false);
 else if (target.attachEvent) {//IE9之前的版本 
 btn.attachEvent("on"+type,function(event){
 return hanlder.call(target,event);//把处理程序作为事件目标的方法调用,更改this指向。
}

以上所述是小编给大家介绍的在JS中通过四种设置事件处理程序的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


推荐阅读

分销微信小程序开发_深化了解在JS中通过四种设

深层次了解在JS中通快递过四种设定恶性事件解决程序的方式 全部的JavaScript恶性事件解决程序的功效域是在其界定时的功效域并非启用时的功效域中实行,而且他们能存储哪个功效...

2021-01-12
怎么创建微信小程序_jQuery在header中设置请求信息

jQuery在header中设定恳求信息内容的方式 本文关键详细介绍了jQuery在header中设定恳求信息内容的方式,十分非常好,具备参照效仿使用价值,必须的朋友能够参照下 jquery是js的类库,...

2021-01-12
北京网站建设公司如何使用移动优先设计原则

在将来全世界70%的客户变成智能化手机上客户,如今全世界互连网流量的51%来源于移动终端。针对客户来讲,它是一种当然的发展,但针对北京市企业网站建设企业设计方案师来讲,...

2021-01-12
网站做谷歌和百度优化排名会抵触吗

网站做Google和百度搜索提升排行会排斥吗:为何广州市企业网站建设的Google和百度搜索排行会相距那麼大呢?网站做百度搜索和Google提升会互相排斥吗?看到过许多网站站长和seo工作人...

2021-01-12
微信公众号码自动自吸干货!

接下去,我觉得共享一下这类线上挣钱新项目方式,它能够彻底颠复传统式的吸引住粉絲的方法。到底是谁这类方式,SEO提升,一切人都可以以在10分鐘内学习培训,而且在营销推广以后...

2021-01-12
选择靠谱的建站公司-建站经验,网络运营,企业网

一套十分出色的纯静态数据后端开发管理方法模版LightYea点一下:1亿光年后台管理管理方法模版(Light Year Admin)是一个根据Bootstrap v3.3.7的后台管理HTML模版。做为后端开发开发设计工作人...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信