javascript事件綁定!

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);


發佈了177 篇原創文章 · 獲贊 11 · 訪問量 46萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章