1 事件綁定
標準瀏覽器同時支持冒泡和捕捉兩種方式。
<span style="white-space:pre"> </span>var node = document.getElementById("input-id");
var divNode = document.getElementById("div-id");
node.addEventListener("click",function(){
alert("input-id");
},false);
divNode.addEventListener("click",function(){
alert("div-id");
},false);
IE 只支持冒泡方式
需要注意的是,IE 綁定事件需要加上on前綴
<span style="white-space:pre"> </span>var node = document.getElementById("ie-input-id");
var divNode = document.getElementById("ie-div-id");
node.attachEvent("onclick",function(){
alert("ie-input-id");
});
divNode.attachEvent("onclick",function(){
alert("ie-div-id");
});
沒辦法,在IE的大市場份額下, IE 最終贏得了主動權於是有了下面的解決方法:
var E = {
on:function(el,type,fn){
el.addEventListener?
el.addEventListener(type,fn,false):el.attachEvent("on" + type,function(){
fn.call(el,window.event);
//這裏使用call主要是爲了保證作用域this的正確性
})
}
};
function handler(e){
//alert(e.getAttribute("alt"));
alert(this == window);
alert(e.srcElement);
}
E.on(document.getElementById("call-id"),"click",handler);