函数语法：Js之on和addEventListener的使用与不同

一、addEventListener语法

DOM标准：elem.addEventListener("事件名",函数对象,是否在捕获阶段触发)
---是否在捕获阶段触发=  true/false，捕获true,冒泡false[开发中都大多都用false]
addEventListener注意事项：
1.特别说明addEventListener不被IE9以下兼容，IE9以下用使用attachEvent()
obj.attachEvent(event,funtionName);
参数：
event:事件类型（需要写成“onclick”前面加on，这个与addEventListener不同）
funtionName:方法名（要参数是也是需要使用匿名函数来传参）

二、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)
} 

三、addEventListener的IE9以下不兼容

querySelector 和 querySelectorAll 方法很好用，可惜IE6、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)
}