js基础_72、事件的绑定
事件的绑定
使用 对象.事件=响应函数 这种形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边的会覆盖掉前边的。
addEventListener()
通过这个方法也可以为元素绑定响应函数。
参数：
1，事件的字符串(名称)，不要on。
2，回调函数，当事件触发时该函数会被调用。
3，是否在捕获阶段触发事件，需要一个布尔值，一般都传false。
比如：
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",function(){},false);
addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。
这个方法不支持IE8及以下的浏览器。
attachEvent()
在IE8中可以使用attachEvent()来绑定事件。
参数：
1，事件的字符串(名称)，要on。
2，回调函数。
这个方法也可以同时为一个事件绑定多个响应函数，不同的是他是后绑定先执行，顺序和addEventListener()相反
addEventListener()中的this，是绑定事件的对象。
attachEvent()中的this，是window。
比如：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
window.onload=function(){
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",function(){
alert(1);
},false);
btn1.addEventListener("click",function(){
alert(2);
},false);
btn1.addEventListener("click",function(){
alert(3);
},false);
/*在IE8中
* btn1.attachEvent("onclick",function(){
alert(1);
});
btn1.attachEvent("onclick",function(){
alert(1);
});
btn1.attachEvent("onclick",function(){
alert(1);
});
*/
};
</script>
</head>
<body id="body">
<button id="btn1">添加超链接</button>
</body>
</html>
自定义一个函数，实现前面两个方法的功能并且兼容所有浏览器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
var bind=function(obj,evenstr,callback){
if(obj.addEventListener){
//大部分浏览器兼容的方法
obj.addEventListener(evenstr,callback,false);
}else{
//IE8兼容的方法
obj.attachEvent("on"+evenstr,function(){
//改变attachEvent中的this指向，这里我们自定了了一个函数让attachEvent去执行了，
//而attachEvent没有去执行它本来该执行的函数。
callback.call(obj);
});
};
};
window.onload=function(){
var btn1=document.getElementById("btn1");
bind(btn1,"click",function(){
alert(this);
})
};
</script>
</head>
<body id="body">
<button id="btn1">添加超链接</button>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构