JS——事件的绑定与解绑

1、绑定形式

ele.addEventListener(evtName, fn)
ele["on" + evtName] = function () {}
ele.onclick = function () {}

2、addEventListener：事件监听器。原事件被执行的时候，后面绑定的事件照样被执行，不会被层叠掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>绑定事件</button>
<script>
    var btnEle = document.getElementsByTagName("button")[0];
    bindEvt2(btnEle, "click", fn1);
    bindEvt2(btnEle, "click", fn2);

    function fn1() {
        console.log("你是美丽的人");
    }

    function fn2() {
        console.log("你是个坏人");
    }
    
    function bindEvt2(ele, evtName, fn) {
        ele.addEventListener(evtName, fn);
    }
</script>
</body>
</html>

//九尺龙泉万卷书，上天生我意何如。
//不能报国平天下，枉为男儿大丈夫。

注意事项：ele["on" + evtName]与ele.onclick绑定的方式会层叠到之前的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点击</button>
<script>
    var btn=document.getElementsByTagName("button")[0];
    btn.onclick=function () {
        console.log("你是美人");
    }
    btn["onclick"]=function () {
        console.log("谢谢呀");
    }
</script>
</body>
</html>

//谢谢呀

3、addEventListener原理：之所以可以不层叠之前注册事件，主要是判断之前是否注册了此类事件，如果注册了就先执行此事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点击</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        console.log("你是美人");
    }
    addEvent(btn, "click", fn);

    function addEvent(ele, evtName, fn) {
        var oldEvnet = ele["on" + evtName];//如果进入绑定事件本身，那么该事件已经本绑定了，所以获取旧的事件必须在新的事件绑定之前
        ele["on" + evtName] = function () {
            //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
            //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
            if (oldEvnet) {
                oldEvnet();//因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
                fn();
            }
            else {
                fn();
            }
        }
    }

    function fn() {
        console.log("谢谢呀")
    }
</script>
</body>
</html>

//你是美人
//谢谢呀

4、事件绑定的兼容写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>
<script>
    var btn = document.getElementsByTagName("button")[0];

//    火狐谷歌IE9+支持addEventListener
//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);

//    IE678支持attachEvent
//    btn.attachEvent("onclick",fn1);
//    btn.attachEvent("onclick",fn2);

    //兼容写法
    EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下，用此代码
                ele["on"+str] = fn;
            }
        }
    }

    EventListen.addEvent(btn,fn1,"click")
    EventListen.addEvent(btn,fn2,"click")

    function fn1(){
        console.log("九尺龙泉万卷书，上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下，枉为男儿大丈夫。");
    }

</script>
</body>
</html>

//九尺龙泉万卷书，上天生我意何如。
//不能报国平天下，枉为男儿大丈夫。

5、事件解绑方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点击</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        console.log("你是美人");
    }
    btn.onclick = null;
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>赋诗</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    EventListen = {
        addEvent: function (ele, fn, str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
            if (ele.addEventListener) {
                //直接调用
                ele.addEventListener(str, fn);
            } else if (ele.attachEvent) {
                ele.attachEvent("on" + str, fn);
            } else {
                //在addEventListener和attachEvent都不存在的情况下，用此代码
                ele["on" + str] = fn;
            }
        },
        removeEvent: function (ele, fn, str) {
            if (ele.removeEventListener) {
                ele.removeEventListener(str, fn);
            } else if (ele.detachEvent) {
                ele.detachEvent("on" + str, fn);
            } else {
                ele["on" + str] = null;
            }
        }
    }
    EventListen.addEvent(btn, fn, "click");
    EventListen.removeEvent(btn, fn, "click");

    function fn() {
        alert(1);
    }
</script>
</body>
</html>

注意事项：ele.onclick只能用ele.onclick=null，removeEvent只能解绑addEventListener，detachEvent只能解绑attachEvent。