事件绑定
2022-07-19 本文已影响0人
冰点雨
addEventListener()
这个方法也可以给元素绑定响应函数
——参数：
1.事件的字符串，不要on
2.回调函数
3.是否在捕获阶段触发事件，一般传false
使用addEventListener()可同时绑定多个事件
当事件触发时，响应函数会按照先后顺序执行
不支持I8及以下浏览器
this是绑定事件对象
btn1.addEventListener("click",function(){
alert(1);
},false);
btn1.addEventListener("click",function(){
alert(2);
},false);
attchEvent()
attchEvent() 这个方法也可以给元素绑定响应函数
——参数：
1.事件的字符串
2.回调函数
使用attchEvent()可同时绑定多个事件
当事件触发时，响应函数执行顺序和addEventListener()相反
IE8及以下
this是window
btn1.attchEvent("onClick",function(){
alert(1);
});
btn1.attchEvent("onClick",function(){
alert(2);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件绑定</title>
<script>
window.onload = function(){
var btn1 = document.getElementById("btn1");
/*
addEventListener() 这个方法也可以给元素绑定响应函数
——参数：
1.事件的字符串，不要on
2.回调函数
3.是否在捕获阶段触发事件，一般传false
使用addEventListener()可同时绑定多个事件
当事件触发时，响应函数会按照先后顺序执行
不支持I8及以下浏览器
this是绑定事件对象
*/
// btn1.addEventListener("click",function(){
// alert(1);
// },false);
// btn1.addEventListener("click",function(){
// alert(2);
// },false);
/*
attchEvent() 这个方法也可以给元素绑定响应函数
——参数：
1.事件的字符串
2.回调函数
使用attchEvent()可同时绑定多个事件
当事件触发时，响应函数执行顺序和addEventListener()相反
IE8及以下
this是window
*/
// btn1.attchEvent("onClick",function(){
// alert(1);
// });
// btn1.attchEvent("onClick",function(){
// alert(2);
// });
bind(btn1,"click",function(){
alert(1);
});
};
function bind(obj,eventStr,callback){
if(obj.addEventListener){
obj.addEventListener(eventStr,callback,false);
}else{
// obj.attchEvent("on"+eventStr,callback);
// 解决this不统一的问题
obj.attchEvent("on"+eventStr,function(){
// 在匿名函数中调用函数
callback.call(obj);
});
}
}
</script>
</head>
<body>
<button id="btn1">点我一下</button>
</body>
</html>
