JavaScript 按钮绑定多个事件和解绑事件

不兼容IE9以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="点击" id="btn">


    <script>
        var btn = document.getElementById("btn");


//绑定事件的方式
/* btn.onclick = function(){
    alert(1);
};

//绑定多次相同的事件
//点击按钮后会提示2，上一次绑定事件被覆盖
btn.onclick = function(){
    alert(2);
};
 */






 //DOM 2级事件绑定方式
 btn.addEventListener("click",function(){

alert(111);

 });


 //多次绑定事件类型，事件会根据书写的顺序进行一个事件排队
 //点击按钮后会提示111，然后提示222

 btn.addEventListener("click",function(){

alert(222);

 });



//另一种写法，直接调用函数名
 btn.addEventListener("click",clickEvent);


 function clickEvent(){
    alert(3);
 };







    </script>


</body>
</html>

仅兼容IE10及以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="点击" id="btn">


    <script>
        var btn = document.getElementById("btn");






btn.attachEvent("onclick",function(){
    alert(1);
});




btn.attachEvent("onclick",clickEvent);

function clickEvent(){

alert(2);

};

//IE8及以下浏览器处理事件队列时，会出现顺序错乱






    </script>


</body>
</html>

html元素

<input type="button" value="点击" id="btn">

三种解绑事件

    //获取元素
            var btn = document.getElementById("btn");

//onclick

//绑定事件方法
        btn.onclick = function(){
            alert(66);
        };
//解除绑定方法
        btn.onclick = null;









//addEventListener

//绑定事件
btn.addEventListener("click",fun);

function fun(){
    alert(5);

};



//解绑事件

btn.removeEventListener("click",fun);










//attachEvent

//绑定事件
btn.attachEvent("onclick",fun);


//解除绑定
btn.detachEvent("coclick",fun);

兼容各版本的绑定和解绑事件写法

//兼容不同浏览器绑定事件
function addEvent(ele,type,fn){
//IE9及以上的浏览器和其他浏览器，使用 addEventListener 方法
//IE9以下的浏览器，使用 attachEvent 方法


//浏览器能力检测
if(ele.addEventListener){
ele.addEventListener(type,fn);


}else if(ele.attachEvent){
ele.attachEvent("on"+type,fn);


}
};




//兼容所有浏览器的解除绑定事件

//参数：事件源，事件类型，事件函数

function removeEvent(ele,type,fn){
    //浏览器能力检测
    if (ele.removeEventListener){

        ele.removeEventListener(type,fn);

    } else if (ele.detachEvent){

        ele.detachEvent("on"+type,fn);

    }
};




//获取元素
        var btn = document.getElementById("btn");

//绑定事件

function fun(){
    alert(1111);
};


addEvent(btn,"click",fun);

//btn.addEventListener("click",fun2);



//解绑事件

removeEvent(btn,"click",fun);