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>
我是黑板。

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

  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误