1. 程式人生 > >JavaScript添加IE事件處理程序

JavaScript添加IE事件處理程序

als 不能 type light div 匿名函數 綁定 use gpo

  IE和其他主流的瀏覽器之間有很多的不兼容,有一些其他瀏覽器支持的方法在IE中並不能完美的支持,首先哪些支持呢?

    1、直接在HTML代碼的元素屬性的位置為事件綁定處理程序;

    2、使用JavaScript的 node.onclick=function(){}

  IE8及之前的版本不支持addEventListener和removeEventListener,支持的是attachEvent()和detachEvent()

    attachEvent()和detachEvent()都需要兩個參數:

    第一個參數是要綁定的事件(onclick、onmouseover.....註意和addEventListener不同)

    第二個參數是要綁定的處理程序(匿名函數或者函數名,註意如果不是匿名函數,函數名不要加括號)

  在使用addEventListener之前應該先檢測當前瀏覽器是否支持該方法,可以將代碼封裝到一個對象中:

<button id="btn">按鈕</button>	
<script>
	var eventUtil = {
		//type 傳入 click mouseover,而不傳onclick,mouseover
		addEvent : function(element, type, func){
			if (element.addEventListener) {    //所有主流瀏覽器,除了 IE 8 及更早 IE版本
			    element.addEventListener(type, func, false);
			} else if(element.attachEvent) {  // IE 8 及更早 IE 版本
			    element.attachEvent(‘on‘+type, func);
			} else {
				var type = "on"+type;
				//element.type = func; //wrong,不會成功
				element[type] = func;
			}
		},
		removeEvent : function(element, type, func){
			if (element.removeEventListener) {    //所有主流瀏覽器,除了 IE 8 及更早 IE版本
			    element.removeEventListener(type, func, false);
			} else if(element.detachEvent) {  // IE 8 及更早 IE 版本
			    element.detachEvent(‘on‘+type, func);
			} else {
				var type = "on"+type;
				//element.type = null; //wrong,不會成功
				element[type] = null;
			}
		}
	}

	var btn = document.getElementById("btn");
	function showOne(){ alert("one"); }
	eventUtil.addEvent(btn, "click", showOne);
	eventUtil.removeEvent(btn, "click", showOne);
</script>

  

  

JavaScript添加IE事件處理程序