事件的綁定

時間 2019-12-18

標籤事件綁定简体版

原文原文鏈接

事件的綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var btn01=document.getElementById("btn01");
                /*
                使用對象.事件=函數 的形式綁定響應函數
                她只能同時爲一個元素的一個事件綁定一個響應事件
                */
                // btn01.onclick=function(){
                //  alert("123");
                // }
                // addEventListener();  經過這個方法  也能夠爲元素綁定事件
                /*
                  參數
                     1.事件的字符串，不要on
                     2.回掉函數，當事件觸發時該函數會被調用
                     3.是否在捕獲階段觸發事件，須要一個布爾值，通常都傳false
                     
                */
               // btn01.addEventListener("click",function(){alert(1);},false);
               // btn01.addEventListener("click",function(){alert(2);},false);
               
               /*
               attachEcent()
                 - 在IE8中可使用attachEvent()來綁定事件
                 - 參數
                   1.事件的字符串，要on
                   2.回調函數
                   
                   能夠同時爲一個事件綁定多個處理函數
                      不一樣的是他是後綁定先執行，執行順序和addEventListener()相反
               */
              bind(btn01,"click",function(){
                  alert(this);
              })
            }
            // 定義一個函數，用來爲指定元素綁定響應函數？
            // addEventListener()中的this，是綁定事件的對象？
            // attachEvent()中的this，是window
            /*
               參數
                 obj  要綁定事件的字符串
                 eventStr 事件的字符串
                 callback  回調函數
            */
            function bind(obj,eventStr,callback){
                if(obj.addEventListener){
                    // 大部分瀏覽器兼容的方式
                    obj.addEventListener(eventStr,callback,false);
                }else{
                    /*
                    this是誰由調用方式決定的
                    callbank.call(obj)
                    */
                    // IE8及如下
                    obj.attachEvent("on"+eventStr,function(){
                        // 在匿名函數中調用回掉函數
                        callback.call(obj);
                    });
                }
                
                
                
            }
        </script>
    </head>
    <body>
        <button type="button" id="btn01">btn01</button>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。