JavaScript事件来源元素

 

些时候我们需要知道是哪个元素触发了某个事件，我们可以事件响应函数中获得这个元素。但是在不同的浏览器中我们需要使用不同的方法来获得这个来源元素。假设evt为事件对象：W3C标准中，使用evt.target,而IE为evt.srcElement。所以我们可以用如下代码来跨浏览器地获得事件的来源元素：

function clickFunc(e){
	var evt = e || window.event;
	var eventSrc = evt.target||evt.srcElement;
}

注意：时间响应函数中的this返回的是定义事件响应函数的元素。我们使用如下的JavaScript代码来显示事件来源元素的信息，可以在页面下方的div内观察得到。

<script type="text/javascript">
function addEventSimple(obj,evt,fn){
	if(obj.addEventListener){
		obj.addEventListener(evt,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent('on'+evt,fn);
	}
}
addEventSimple(window,'load',init);
function init(){
	addEventSimple(document,'click',clickFunc);
}
function clickFunc(e){
	var evt = e || window.event;
	var eventSrc = evt.target||evt.srcElement;
	var str = evt.type + "事件发生！";
	str += "<br />事件的来源元素：" + eventSrc;
	str += "<br />来源元素的nodeName：" + eventSrc.nodeName;
	str += "<br />来源元素的nodeValue：" + eventSrc.nodeValue;
	str += "<br />来源元素的nodeType：" + eventSrc.nodeType;
	str += "<br />时间响应函数的this：" + this;
	var watchScreen = document.getElementById("watchScreen");
	watchScreen.innerHTML = str;
}
</script>

click事件发生！
事件的来源元素：[object]
来源元素的nodeName：DIV
来源元素的nodeValue：null
来源元素的nodeType：1
时间响应函数的this：[object]

从测试的结果可以看到，由于响应函数定义在document上，所以this一直都不会改变。而事件的来源函数却会不断地改变。之所以这个定义在document上的事件响应函数可以响应所有元素上的click事件，是因为事件是会冒泡的，会从来源元素一直逐级上升到document上。