深入理解在JS中通过四种设置事件处理程序的方法

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

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

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

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

代码*/ } } } }

关于with的用法,可以自行查阅,这里后面有文章讲解。读者先自行了解一下。提供一个连接（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/with）

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

第二种方式(调用 函数)

这段代码弹出来的是btn3。

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

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

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

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

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

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

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

以上所述是小编给大家介绍的在JS中通过四种设置事件处理程序的方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文链接：https://www.f2er.com/js/41154.html

深入理解在JS中通过四种设置事件处理程序的方法

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

第二种方式(调用函数)

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

猜你在找的JavaScript相关文章