JS之事件处理

1，事件流：事件触发顺序
    事件冒泡：(IE)从嵌套层次最深的元素开始，逐级向上传播至document
    事件捕获：与事件冒泡相反
2，事件处理程序
a,HTML事件处理程序；

	<input type="button" value="btn1" οnclick="fun()">
	<script type="text/javascript">
	function fun()
	{
	doucument.write("HTML事件处理程序");
	}
	</script>

b,Dom0级事件处理程序

	<input type="button" value="btn2" id="btn2">
	<script type="text/javascript">
	function fun()
	{
	 doucument.write("Dom0级事件处理程序");
	}
	var tn=document.getElementByid("btn2");
	//添加事件
	tn.οnclick=function()
	{
		doucument.write("Dom0级事件处理程序");
	}
	tn.οnclick=fun;
	//删除事件
	tn.οnclick=null;
	</script>

c,Dom2级事件处理程序

	<input type="button" value="btn3" id="btn3">
	<script type="text/javascript">
	function fun()
	{
	 doucument.write("Dom0级事件处理程序");
	}
	var tn=document.getElementByid("btn3");
    //添加事件
	tn.addEventListener("click",fun,false);//false表示事件冒泡（非IE）
	tn.attachEvent("onclick",fun);//(IE事件处理程序)
    //删除事件
	tn.removeEventListener("click",fun,false);
	tn.detachEvent("onclick",fun);//(IE事件处理程序)
	</script>

d,跨浏览器事件处理程序

	<input type="button" value="btn4" id="btn3">
	<script type="text/javascript">
	function fun()
	{
	 doucument.write("Dom0级事件处理程序");
	}
	var tn=document.getElementByid("btn4");
    var eventf={
		//添加事件
		addEvent:function(ele,eventType,func){
			if(ele.addEventListener){
				ele.addEventListener(eventType,func,false);//false表示事件冒泡（非IE）
			}else if(ele.attachEvent){
				ele.attachEvent("on"+eventType,func);//(IE)
			}else{
				ele["on"+eventType]=func;
			}
		}
		//删除事件
		removeEvent:function(ele,eventType,func){
			if(ele.removeEventListener){
				ele.removeEventListener(eventType,func,false);//false表示事件冒泡（非IE）
			}else if(ele.detachEvent){
				ele.detachEvent("on"+eventType,func);//(IE)
			}else{
				ele["on"+eventType]=null;
			}
		}
	}
	//调用变量
	eventf.addEvent(tn,"click",fun);
	</script>

3，事件对象
   a，DOM中的事件对象
   事件类型：type
   事件目标：target
   阻止冒泡：event.stopPropagation();
   阻止事件默认行为：event.preventDefault();
   b，IE中的事件对象
   事件类型：type
   事件目标：srcElement
   阻止冒泡：cancelBubble(true/false)
   阻止事件默认行为：returnValue(true/false)