[Event]事件（高程版）（三）事件对象

作者：zccst

1，DOM中的事件对象
2，IE事件对象
3，兼容各浏览器的事件对象

<script type="text/javascript">  
window.onload=function(){
function G(id){  
	return document.getElementById(id);      
}
/*---------------------------------------------------------------------------
1，DOM中的事件对象（IE8及以前不支持）
bubbles 表面事件是否冒泡，如果为true，则可以stopPropagation() 取消进一步捕获活冒泡
cancelable 是否可以取消默认行为，如果为true，则可以preventDefault()取消事件默认行为
type
target
currentTarget
eventPhase  1表示捕获阶段，2表示目标阶段，3表示冒泡阶段
*/

/*
（1）target与currentTarget区别
*/
	//target与currentTarget区别
    function addEvent(obj, ev, handler){  
        if(window.attachEvent){  
            obj.attachEvent("on" + ev, handler);  
        }else if(window.addEventListener){   
            obj.addEventListener(ev, handler, false);  
        }  
    }
    function test(e){  
        alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);  
    }  
    var outer = G("outer");  
    var inner = G("inner");  
    //addEvent(inner, "click", test);  
    addEvent(outer, "click", test);  


/*
（2）阻止特定事件的默认行为 preventDefault()
比如，链接的默认行为就是在被单击时会导航到href特性指定的URL。阻止方法：
*/
var link = G("myLink");
link.onclick = function(event){
	event.preventDefault();//IE8及以前不支持
};
//当然，cancelable为true的事件，才能使用preventDefault()方法

/*
（3）stopPropagation()用于立即停止DOM层次中的传播，取消进一步的事件捕获活冒泡。
例如，直接添加到一个按钮的事件处理程序可以调用stopPropagation()，从而避免触发注册在document.body上面的事件处理程序：
*/
var btn1 = G("btn1");
btn1.onclick=function(e){
	alert("Button Clicked");
	e.stopPropagation();//注释的话，会继续弹出"body Clicked"。IE8及以前不支持
}
document.body.onclick=function(e){
	alert("body Clicked");
}

/*
（4）eventPhase表示事件当前正处在事件流的哪个阶段
*/
var btn1 = G("btn2");
btn2.onclick=function(e){
	alert(e.eventPhase);//2
}
btn2.addEventListener("click",function(e){
	alert(e.eventPhase);//2
},true);
document.body.addEventListener("click",function(e){
	alert(e.eventPhase);//1
},true);
document.body.onclick=function(e){
	alert(e.eventPhase);//3
}
//打印结果：1,2,2,3
//结论：点击按钮的时候，body最先感知，其次是button，最后又冒泡到body


/*---------------------------------------------------------------------------
2，IE中的事件对象
cancelBubble 默认false，如果为true，则可以取消进一步捕获活冒泡，类似stopPropagation() 
returnValue 默认true，如果false，则可以取消事件默认行为，类似preventDefault()
srcElement 事件的模板，类似target
type 事件类型
*/
/*
（1）this, event.srcElement的区别
由于this未必始终等于事件目标，所以最好还是使用event.srcElement比较保险，例如：
*/
var btn1 = G("btn1");
btn1.onclick=function(){
	alert(window.event.srcElement);
	alert(window.event.srcElement == this); //true
};
btn1.onclick=function(e){//如果直接这么写，会覆盖掉上一个onclick赋值
	alert(e.srcElement);
	alert(e.srcElement == this); //true
};
btn1.attachEvent("onclick",function(e){
	//attachEvent中this是window
	alert(event.srcElement == this); //false
});
/*
小疑问：window.event是一个全局对象，怎么跟this相等？
后来发现window.event就是当前对象，事件函数里的window.event.srcElement都不一样，都是当前点事件对象。测试如下：
*/
var btn1 = G("btn1");
btn1.onclick=function(){
	alert(window.event.srcElement);
	alert(window.event.srcElement == this); //true
};

var btn2 = G("btn2");
btn2.onclick=function(){
	alert(window.event.srcElement);
	alert(window.event.srcElement == this); //true
};

/*
（2）returnValue=false阻止特定事件的默认行为，相当于preventDefault()
比如，链接的默认行为就是在被单击时会导航到href特性指定的URL。阻止方法：
*/
var link = G("myLink");
link.onclick = function(event){
	window.event.returnValue = false;//event.preventDefault();
};

/*
（3）cancelBubble=true停止DOM层次中的传播，取消进一步的事件捕获活冒泡，相当于 stopPropagation()。*/
var btn1 = G("btn1");
btn1.onclick=function(e){
	alert("Button Clicked");
	window.event.cancelBubble = true;//e.stopPropagation();
	//e.cancelBubble = true;//写法2
}
document.body.onclick=function(e){
	alert("body Clicked");
}


/*---------------------------------------------------------------------------
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;//置空
		}
	},
	//一个入口-入场
	getEvent:function(event){
		return event || window.event;
	},
	/*一个核心-进去的那个人*/
	getTarget:function(event){
		return event.target || event.srcElement;
	},
	/*两个门卫，preventDefault是前门，stopPropagation是后门*/
	//preventDefault()，操作前：阻止默认事件
	preventDefault:function(event){
		if(event.preventDefault){
			event.preventDefault();
		}else{
			event.returnValue = false;
		}
	},
	//stopPropagation()，完事后：阻止冒泡
	stopPropagation:function(event){
		if(event.stopPropagation){
			event.stopPropagation();
		}else{
			event.cancelBubble = true;
		}
	}
};


//来实战一把
//（1）EventUtil.getEvent(e)
btn.onclick = function(e){
	var e = EventUtil.getEvent(e);//第一行
}

//（2）EventUtil.getTarget(e)
var btn1 = G("btn1");
btn1.onclick = function(e){
	var e = EventUtil.getEvent(e);
	var target = EventUtil.getTarget(e);//target就是当前元素
}

//（3）EventUtil.preventDefault(e)
var link = G("myLink");  
link.onclick = function(e){
	var e = EventUtil.getEvent(e);
	EventUtil.preventDefault(e);//阻止了默认事件
}

//（4）EventUtil.stopPropagation(e)
var btn1 = G("btn1"); 
btn1.onclick=function(e){
	var e = EventUtil.getEvent(e);
	EventUtil.stopPropagation(e);//阻止了冒泡
}
document.body.onclick=function(e){  
    alert("body Clicked");  
}  




}
</script>
</head>
<body>

<div id="outer" style="background:#099">  
	click outer  
	<p id="inner" style="background:#9C0">click inner</p>  
	<br>  
</div>  

<a href="www.sogou.com" id="myLink">搜狗<a>
<input type="button" id="btn1" value="我是按钮1" />
<input type="button" id="btn2" value="我是按钮2" />

如果您觉得本文的内容对您的学习有所帮助，您可以微信：