时间:2021-05-18
所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式:
第一种方式(HTML标签属性):
<input type="button" id="btn1" value="测试" onclick="alert(this.id);" />上面的代码是通过设置HTML标签属性为给button 添加了点击事件,当点击button 按钮时会弹出这个button的id,即btn1。
这种通过HTML属性来注册事件处理程序是一个例外。它们被转换为能存取全局变量的顶级函数而非任何本地变量。由于历史的原因,它们运行在一个修改后的作用域链中。通过HTML属性定义的事件处理程序能像本地变量一样使用目标对象、容器对象(form)对象和document对象的属性。它会被浏览器转换为类似如下的代码:
function (event){ with(document){ with(this.form||{}){ with(this){ } } } }关于with的用法,可以自行查阅,这里后面有文章讲解。读者先自行了解一下。提供一个连接(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/with)
这种方式现在已经不推荐使用。
第二种方式(调用函数)
<input type="button" id="btn2" value="测试" onclick="test()" /><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="测试" onclick="test()" /> 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中通过四种设置事件处理程序的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Java内省(Introspector)深入理解一些概念: 内省(Introspector)是Java语言对JavaBean类属性、事件的一种缺省处理方法。
java中Springtask定时任务的深入理解在工作中有用到springtask作为定时任务的处理,spring通过接口TaskExecutor和TaskSc
首先看我们的源代码。复制代码代码如下:深入理解Javascriptconsole.log(this);深入理解Javascript我们知道,通过浏览器打开这个页
深入理解pythontry异常处理机制#python的try语句有两种风格#一:种是处理异常(try/except/else)#二:种是无论是否发生异常都将执行
深入理解Js中的thisJavaScript作用域为静态作用域staticscope,但是在Js中的this却是一个例外,this的指向问题就类似于动态作用域,