web.绑定事件

最新推荐文章于 2025-05-22 23:07:15 发布

春花秋月灬相伴

最新推荐文章于 2025-05-22 23:07:15 发布

阅读量371

点赞数

文章标签： js-绑定函数

本文链接：https://blog.youkuaiyun.com/qq_38300174/article/details/71437636

版权

首先咱们要先理清为什么要绑定事件，先看一段代码

var btn_1 = document.getElementById('btn');
btn_1.onclick = function(){
alert(1);
};
btn_1.onclick = function(){
alert(2);
}; //这个事件只会弹出2;

但是有些情况我们还是挺希望两个都能弹出来，看我们的绑定时间

var btn_1 = document.getElementById('btn');
btn_1.addEventListener("click",function(){
alert(1);
},false);
btn_1.addEventListener("click",function(){
alert(2);
},false); //这个事件首先会弹出1，然后在弹出2;
但这段代码是有兼容性问题的，

下面这个是完美版，相信遇到过兼容性问题并且处理过的朋友们都能看懂，下面我们使用if else 处理

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识语句</title>
<script type="text/javascript">
window.onload=function(){
var btn_1 = document.getElementById('btn');
if(btn_1.addEventListener){
btn_1.addEventListener('click',function(){
alert(1);
},false)
btn_1.addEventListener('click',function(){
alert(2);
},false); }
else{
btn_1.attachEvent('onclick',function(){
alert(1);
});
btn_1.attachEvent('onclick',function(){
alert(2);
});
}
    }
</script>
</head>
<body>
    <input type="button" name="btn" id="btn" value="按钮" />
</body>
</html>

最后给大家个用调用函数实现绑定函数，数遍解释一些要点

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    #div1 {width:200px; height:200px; background:red; position:absolute;display: none;}
</style>
<script>
function Getaddevent(obj,name,fn){
        if(obj.addEventListener){//if else 考虑兼容性问题
            //addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；
            //第二个参数表示要接收事件处理的函数；第三个参数为 useCapture（true,false）具体就不再讲解第三个参数
            obj.addEventListener(name,fn,false);  
        }
        else{
            //attachEvent(事件名称, 函数)，绑定事件处理函数，事件加on
            obj.attachEvent('on'+name,fn);      
        }
    }
window.onload=function(){
    var ipt_1=document.getElementById('ipt');
    Getaddevent(ipt_1,'click',function(){
        alert(1);
    })
    Getaddevent(ipt_1,'click',function(){
        alert(2);
    })
}
</script>
</head> 

<body>
<input type="button" id="ipt" value="按钮" />
</div>
</body>
</html>