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