事件绑定

<!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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容