web.绑定事件

来源：互联网发布：电信运营商dpi数据编辑：程序博客网时间：2024/06/14 13:44

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

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>

0 0