函數語法：Js之on和addEventListener的使用與不一樣

1、addEventListener語法

DOM標準：elem.addEventListener("事件名",函數對象,是否在捕獲階段觸發)
---是否在捕獲階段觸發=  true/false，捕獲true,冒泡false[開發中都大多都用false]
addEventListener注意事項：
1.特別說明addEventListener不被IE9如下兼容，IE9如下用使用attachEvent()
obj.attachEvent(event,funtionName);
參數：
event:事件類型（須要寫成「onclick」前面加on，這個與addEventListener不一樣）
funtionName:方法名（要參數是也是須要使用匿名函數來傳參）

 

2、addEventListener與on的區別

1.on事件會被後面的on的事件覆蓋
///addEventListener不被覆蓋，可移除事件
/結果1,2
btn.addEventListener("click",f1,false);
btn.addEventListener("click",f2,false);
//btn.removeEventListener('click',f1,false);//移動f1，不執行
function f1(){
    alert(1)
}
function f2(){
    alert(2)
}

//on後一個覆蓋前一個,結果2，不能移動事件
btn.onclick=f1;
btn.onclick= f2;
function f1(){
    alert(1)
}
function f2(){
    alert(2)
} 

 

3、addEventListener的IE9如下不兼容

querySelector 和 querySelectorAll 方法很好用，惋惜IE六、IE7不支持，document.getElementById都兼容

var  obtn = document.getElementById('tabs');
addEvent(obtn,'click',function(){
    alert("a")
})
// 添加事件監聽
function addEvent(element, eventType, callback){
    if(element.addEventListener){
        element.addEventListener(eventType, callback, false);
    } else if(element.attachEvent){
        element.attachEvent('on' + eventType, callback);
    } else {
        element['on' + type] = callback;
    }
}

 

//這樣寫也語法也對
obtn['onclick']=function(){
    alert(1111111)
}