javascript 事件

DOM2级事件处理程序：

用于处理指定和删除事件处理程序的操作：addEventListener() 和removeEventListener()，接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
	alert(this.id);
},false);
var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
	alert("hello world!");
},false);<span style="font-family:SimSun;font-size:10px;">//btn hello world</span>

移除事件处理程序：removeEventListener()，传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同。

var btn=document.getElementById("btn");
var handler=function(){
	alert(this.id);
};
btn.addEventListener("click",handler,false);
//移除
btn.removeEventListener("click",handler,false);

IE事件处理程序：

attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。

var btn=document.getElementById("btn");
btn.attachEvent("onclick",function(){
	alert(this.id);
});
btn.attachEvent("onclick",function(){
	alert("hello world!");
});//hello world  btn

移除事件处理程序需要detachEvent()方法。

var btn=document.getElementById("btn");
var handler=function(){
	alert(this.id);
};
btn.attachEvent("onclick",handler);
//移除
btn.detachEvent("onclick",handler);

两者区别：

addEventListener() 是DOM2标准中定义的方法，它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序（由这个函数的第三个参数决定true/false），既然这个是DOM2标准中定义的，那么只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chrome和Opera都支持这个）。

attachEvent()方法并不是DOM标准定义的，而是IE自己实现的，而由于IE8及之前版本只支持事件冒泡，所以可想而知这个方法添加的事件处理程序都只能在冒泡阶段才会被调用，addEventListener()和attachEvent()还有一个区别就是第一个参数——事件类型，attachEvent()的事件类型都是前面带'on'的，比如点击事件 click ，addEventListener()可以传入 "click"，而 attachEvent() 却要传入 'onclick'；

在了解这些方法之前我都是直接使用DOM0事件处理程序的。然而是有一些缺陷的。它不支持一个元素多个事件处理程序。

var btn=document.getElementById("btn");
btn.οnclick=function(){
	alert("1");
}
btn.οnclick=function(){
	alert("2");
}
btn.οnclick=function(){
	alert("3");
}

像这样子的程序，输出的结果只有3。而上面两种方法是支持多个事件处理程序，但是输出的结果顺序不一样。

由于浏览器支持的不同，因此需要跨浏览器的事件处理程序。

var EventUtil={
	addHandler:function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent("on"+type,handler);
		}else{
			element["on"+type]=handler;
		}
	},
	removeHandler:function(element,type,handler){
		if(element.removeEventListener){
			element.removeEventListener(type,handler,false);
		}else if(element.detachEvent){
			element.detachEvent("on"+type,handler);
		}else{
			element["on"+type]=null;
		}
	}
}

实现：

var btn=document.getElementById("btn");
var handler=function(){
	alert(this.id);
};
EventUtil.addHandler(btn,"click",handler);
//移除
EventUtil.removeHandler(btn,"click",handler);

事件对象：

DOM中的事件对象：event对象。事件目标：event.target。

var btn=document.getElementById("btn");
btn.οnclick=function(event){
	alert(event.type);//click
}

要阻止特定事件的默认行为，可以使用preventDefault()方法。

var link=document.getElementById("myLink");
link.οnclick=function(event){
	event.preventDefault();
};

stopPropagation()方法用于停止事件在DOM层次中的传播，即取消进一步的事件捕获或者冒泡。

var btn=document.getElementById("btn");
btn.οnclick=function(event){
	alert("Clicked");
	event.stopPropagation();
};
document.body.οnclick=function(event){
	alert("Body clicked");
};

eventPhase属性可以用来确定事件当前正位于事件流的哪个阶段。

IE中的事件对象

事件目标：event.srcElement

要阻止特定事件的默认行为，将returnValue设置为false即可。

阻止冒泡：将cancelBubble设置为true即可。

var btn=document.getElementById("btn");
btn.οnclick=function(){
	var event=window.event;
	alert(event.type);//click
};

跨浏览器的事件对象：

var EventUtil={
	addHandler:function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent("on"+type,handler);
		}else{
			element["on"+type]=handler;
		}
	},
	getEvent:function(event){
		return event?event:window.event;
	},
	getTarget:function(event){
		return event.target||event.srcElement;
	},
	preventDefault:function(event){
		if(event.preventDefault){
			event.preventDefault();
		}else{
			event.returnValue=false;
		}
	},
	removeHandler:function(element,type,handler){
		if(element.removeEventListener){
			element.removeEventListener(type,handler,false);
		}else if(element.detachEvent){
			element.detachEvent("on"+type,handler);
		}else{
			element["on"+type]=null;
		}
	},
	stopPropagation:function(event){
        if(event.stopPropagation){
        	event.stopPropagation();
        }else{
        	event.cancelBubble=true;
        }
	}
}

使用方法：

var btn=document.getElementById("btn");
EventUtil.addHandler(btn,"click",function(event){
	event=EventUtil.getEvent(event);
	var target=EventUtil.getTarget(event);
	alert(target);
});

var myLink=document.getElementById("myLink");
EventUtil.addHandler(myLink,"click",function(event){
	event=EventUtil.getEvent(event);
	EventUtil.preventDefault(event);
});

一般是先判断事件再进行其他操作。

事件类型：

load事件：一般是window触发，还要图像也可以。

EventUtil.addHandler(window,"load",function(event){
	alert("loaded!");
});

var img=document.getElementById("myImg");
EventUtil.addHandler(img,"load",function(event){
	event=EventUtil.getEvent(event);
	alert(EventUtil.getTarget(event).src);
});

unload事件：在文档被完全卸载后触发。

resize事件：当浏览器窗口被调整到一个新的高度或者宽度时就会触发resize事件。

scroll事件：页面中相应元素的变化。

blur事件：在元素失去焦点时触发。

focus事件：在元素获得焦点时触发。