这篇文章主要介绍JS中如何设置事件处理程序，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
第一种方式(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中如何设置事件处理程序”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
