<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"> window.onload = function(){ /* * 點擊按鈕以后彈出一個內容 */
//獲取按鈕對象
var btn01 = document.getElementById("btn01"); /* * 使用 對象.事件 = 函數 的形式綁定響應函數， * 它只能同時為一個元素的一個事件綁定一個響應函數， * 不能綁定多個，如果綁定了多個，則后邊會覆蓋掉前邊的 */
//為btn01綁定一個單擊響應函數
/*btn01.onclick = function(){ alert(1); };*/
//為btn01綁定第二個響應函數
/*btn01.onclick = function(){ alert(2); };*/
/* * addEventListener() * - 通過這個方法也可以為元素綁定響應函數 * - 參數： * 1.事件的字符串，不要on * 2.回調函數，當事件觸發時該函數會被調用 * 3.是否在捕獲階段觸發事件，需要一個布爾值，一般都傳false * * 使用addEventListener()可以同時為一個元素的相同事件同時綁定多個響應函數， * 這樣當事件被觸發時，響應函數將會按照函數的綁定順序執行 * * 這個方法不支持IE8及以下的瀏覽器 */
/*btn01.addEventListener("click",function(){ alert(1); },false); btn01.addEventListener("click",function(){ alert(2); },false); btn01.addEventListener("click",function(){ alert(3); },false);*/
/* * attachEvent() * - 在IE8中可以使用attachEvent()來綁定事件 * - 參數： * 1.事件的字符串，要on * 2.回調函數 * * - 這個方法也可以同時為一個事件綁定多個處理函數， * 不同的是它是后綁定先執行，執行順序和addEventListener()相反 */
/*btn01.attachEvent("onclick",function(){ alert(1); }); btn01.attachEvent("onclick",function(){ alert(2); }); btn01.attachEvent("onclick",function(){ alert(3); });*/
/*btn01.addEventListener("click",function(){ alert(this); },false);*/
/*btn01.attachEvent("onclick",function(){ alert(this); });*/ bind(btn01 , "click" , function(){ alert(this); }); }; //定義一個函數，用來為指定元素綁定響應函數
/* * addEventListener()中的this，是綁定事件的對象 * attachEvent()中的this，是window * 需要統一兩個方法this */
/* * 參數： * obj 要綁定事件的對象 * eventStr 事件的字符串(不要on) * callback 回調函數 */
function bind(obj , eventStr , callback){ if(obj.addEventListener){ //大部分瀏覽器兼容的方式
obj.addEventListener(eventStr , callback , false); }else{ /* * this是誰由調用方式決定 * callback.call(obj) */
//IE8及以下
obj.attachEvent("on"+eventStr , function(){ //在匿名函數中調用回調函數
callback.call(obj); }); } } </script>
</head>
<body>
<button id="btn01">點我一下</button>
</body>
</html>
window.onload = function(){
var btn = document.querySelector("button");
bd(btn,"click",function(){
alert("點擊1")
})
bd(btn,"click",function(){
alert("點擊2")
})
bd(btn,"click",function(){
alert("點擊3")
})
}
// 正常瀏覽器obj.addEventListener 與 IE8---obj.attachEvent 兼容
function bd(obj,str,callback){
if(obj.addEventListener){
obj.addEventListener(str,callback,false);
}else{
// 在回調函數外添加一層回調函數就可以自己通過call的方式制定this指向, attachEvent默認指向window
obj.attachEvent("on"+str,function(){
callback.call(obj);
})
}
}
