事件綁定

<!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想要給誰添加綁定事件，就讓誰去調(diào)用addEventListener
        //這個(gè)函數(shù)。這個(gè)函數(shù)，有三個(gè)參數(shù)
        //第一參數(shù)，代表要綁定什么類型的事件，點(diǎn)擊（click），鼠標(biāo)移動（mousemove）
        //不帶on的事件，是個(gè)字符串
        //第二個(gè)參數(shù)是給這個(gè)事件綁定的方法。
        redDiv.addEventListener("click",function() {
            console.log("你點(diǎn)到人家了");
        });
        redDiv.addEventListener("click",function() {
            console.log("你又點(diǎn)到人家了");
        });
        
        //綁定事件（第三種：ie）
        //和addEventListener，不同的地方在于事件類型要加on，比如onclick
//      redDiv.attachEvent("onclick",function() {
//          console.log("我是來自IE的點(diǎn)擊");
//      });

        //封裝一個(gè)兼容的寫法。
        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("自己寫的函數(shù)");
        }
        
        //移除事件(IE)
        redDiv.removeEventListener("click",test,false);
        //移除事件（IE）
//      redDiv.detachEvent("onclick",test);
    </script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容