快捷導(dǎo)航

javascript事件的綁定基礎(chǔ)實例講解（34）

更新時間：2017年02月14日 16:34:14 作者：厚積薄發(fā)2017

這篇文章主要為大家詳細(xì)介紹了javascript事件的綁定基礎(chǔ)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js事件綁定的具體代碼，供大家參考，具體內(nèi)容如下

<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <script type="text/javascript"> 
    
   window.onload = function(){ 
     
    var btn01 = document.getElementById("btn01"); 
     
    //為按鈕綁定一個單擊響應(yīng)函數(shù) 
    /*btn01.onclick = function(){ 
     alert(1); 
    }; 
     
    //再為按鈕綁定一個單擊響應(yīng)函數(shù) 
    btn01.onclick = function(){ 
     alert(2); 
    };*/ 
     
    /* 
     * 使用 對象.事件 的形式不能同時為一個元素的同一個事件綁定多個處理函數(shù)， 
     * 如果綁定了多個，則后邊的會將前邊的覆蓋掉 
     * 
     * 如果需要同時為一個事件綁定多個響應(yīng)函數(shù)，則可以使用 
     * addEventListener()這個方法來綁定響應(yīng)函數(shù) 
     *  參數(shù)： 
     *   1.要綁定的事件（字符串 不要on） 
     *   2.回調(diào)函數(shù)（事件觸發(fā)時，該函數(shù)將會執(zhí)行） 
     *   3.是否在捕獲階段觸發(fā)事件（都傳false） 
     * 
     * 使用這種方式可以同時為一個事件綁定多個響應(yīng)函數(shù)， 
     *  響應(yīng)函數(shù)按照綁定的順序執(zhí)行 
     * 
     * 該方法不支持IE8及以下的瀏覽器 
     *  在這些瀏覽器中需要使用 attachEvent()方法來實現(xiàn)相同的功能 
     */ 
     
    /*btn01.addEventListener("click",function(){ 
     alert(1); 
    },false); 
     
    btn01.addEventListener("click",function(){ 
     alert(2); 
    },false); 
     
    btn01.addEventListener("click",function(){ 
     alert(3); 
    },false);*/ 
     
    /* 
     * attachEvent() 
     * - 參數(shù)： 
     *  1.事件的類型（字符串 要on） 
     *  2.回調(diào)函數(shù) 
     * 
     * attachEvent() 
     * - 可以同時為一個事件綁定多個響應(yīng)函數(shù)，但是它的執(zhí)行順序不一定 
     *  ie9 ie10 先綁定先執(zhí)行 
     *  ie8 后綁定先執(zhí)行 
     * 
     * 這個方法只支持IE10及以下的瀏覽器 
     */ 
    /*btn01.attachEvent("onclick" , function(){ 
     alert(1); 
    });*/ 
     
    /*btn01.attachEvent("onclick" , function(){ 
     alert(2); 
    }); 
     
    btn01.attachEvent("onclick" , function(){ 
     alert(3); 
    });*/ 
     
    /* 
     * 在正常瀏覽器中使用addEventListener()來綁定 
     *  它的響應(yīng)函數(shù)中的this就是綁定事件的對象 
     * 而在IE中，使用的是attachEvent()來綁定的事件 
     *  而它的響應(yīng)函數(shù)中的this是window 
     */ 
    bind(btn01 , "click" , function(){ 
     alert(this); 
    }); 
     
   }; 
    
   /* 
    * 自定義一個函數(shù)，來兼容所有的瀏覽器 
    * 參數(shù)： 
    *  obj 要綁定事件的對象 
    *  eventStr 事件的字符串,不要on 
    *  callback 回調(diào)函數(shù)，事件觸發(fā)時調(diào)用的函數(shù) 
    */ 
   function bind(obj , eventStr , callback){ 
     
    if(obj.addEventListener){ 
     //如果是正常瀏覽器 
     obj.addEventListener(eventStr , callback , false); 
    }else{ 
     //IE8 
     /* 
      * attachEvent()中的回調(diào)函數(shù)的this是window，需要修改為obj 
      * this是誰由函數(shù)的調(diào)用方式?jīng)Q定 
      * 1.以函數(shù)的形式調(diào)用，this是window 
      * 2.以方法的形式調(diào)用，this是調(diào)用方法的對象 
      * 3.以構(gòu)造函數(shù)的形式調(diào)用，this是新創(chuàng)建的對象 
      * 4.使用call和apply調(diào)用時，this是第一個參數(shù) 
      */ 
     obj.attachEvent("on"+eventStr , function(){ 
      //在attchEvent()中不傳遞callback而是傳遞一個匿名函數(shù) 
      //這樣在事件觸發(fā)時，瀏覽器不會調(diào)用callback而是調(diào)用匿名函數(shù) 
      //在匿名函數(shù)中來調(diào)用回調(diào)函數(shù) 
      callback.call(obj); 
       
     }); 
    } 
   } 
    
    
  </script> 
 </head> 
 <body> 
   
  <button id="btn01">點我一下</button> 
   
 </body> 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: