事件绑定

作者: 洛洛kkkkkk | 来源:发表于2017-04-20 19:21 被阅读0次

JS 事件监听、事件委托2018-07-10
JS-事件绑定
事件绑定、事件冒泡与捕获
025 JS事件
IE的attachEvent
JavaScript事件
js事件
绑定事件自定义事件事件冒泡
jQuery事件
2018-10-18

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .redDiv{
                width: 300px;
                height: 300px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="redDiv"></div>
    </body>
    <script type="text/javascript">
        var redDiv=document.querySelector(".redDiv");
        //绑定事件
        redDiv.onclick = function () {
            console.log("111");
        }
        redDiv.onclick = function () {
            console.log("222");
        }
        
        //绑定事件 （第二种）
        //addEventListener想要给谁添加绑定事件，就让谁去调用addEventListener
        //这个函数。这个函数，有三个参数
        //第一参数，代表要绑定什么类型的事件，点击（click），鼠标移动（mousemove）
        //不带on的事件，是个字符串
        //第二个参数是给这个事件绑定的方法。
        redDiv.addEventListener("click",function() {
            console.log("你点到人家了");
        });
        redDiv.addEventListener("click",function() {
            console.log("你又点到人家了");
        });
        
        //绑定事件（第三种：ie）
        //和addEventListener，不同的地方在于事件类型要加on，比如onclick
//      redDiv.attachEvent("onclick",function() {
//          console.log("我是来自IE的点击");
//      });

        //封装一个兼容的写法。
        function addEv (type,fn,target) {
            if(target.attachEvent){
                target.attachEvent("on"+type,fn);
            }else{
                target.addEventListener(type,fn,false);
            }
        }
        addEv("click",test,redDiv);
        function test() {
            console.log("自己写的函数");
        }
        
        //移除事件(IE)
        redDiv.removeEventListener("click",test,false);
        //移除事件（IE）
//      redDiv.detachEvent("onclick",test);
    </script>
</html>