JavaScript click事件深入

在上一个例子“addEventSimple观察鼠标事件”中，我们观察了发生在一个元素上的所有鼠标事件。现在我们再来深入研究某一个具体的鼠标事件的更多细节。

获得事件

要获得事件对象（也即event对象），我们可以在事件响应函数中使用如下代码：

function clickFunc(e){
	var evt = e || window.event
}

《ppk谈JavaScript》一书介绍了代码的原理：W3C标准兼容的浏览器，事件将会作为第一个参数被传入函数中，也就是上面函数的参数e；微软的IE中，事件将会被存储在全局变量window.event中。所以以上代码会将事件对象存储在evt变量中。

能够获得事件对象，我们就可以进一步的访问它的属性了。

事件对象的属性

type属性，也就是事件的类型。

位置属性，有许多属性可以用来获得鼠标事件的位置。但是并不是每个属性都能够跨浏览器，我们使用如下的代码来做一个显示事件属性的实例：

<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 str = "";
	var watchScreen = document.getElementById("watchScreen");
	if(evt.pageX||evt.pageY){
		str += "pageX:" + evt.pageX + " ";
		str += "pageY:" + evt.pageY;
		str += "<br />";
	}
	if(evt.offsetX||evt.offsetY){
		str += "offsetX:" + evt.offsetX + " ";
		str += "offsetY:" + evt.offsetY;
		str += "<br />";
	}
	if(evt.clientX||evt.clientY){
		str += "clientX:" + evt.clientX + " ";
		str += "clientY:" + evt.clientY;
		str += "<br />";
	}
	if(evt.screenX||evt.screenY){
		str += "screenX:" + evt.screenX + " ";
		str += "screenY:" + evt.screenY;
		str += "<br />";
	}
	watchScreen.innerHTML = evt.type + "事件发生！<br />" + str;
}
</script>

我们在代码中访问了几个属性，其中：client表示为相对浏览器窗口的位置；offset表示相对目标对象的位置；page表示相对document对象的位置；screen则表示相对计算机显示器的位置。

以上代码的实际效果如下，我们把事件响应函数添加在了document上，所以可以在文档的任何一个地方点击鼠标左键，就可以观察到下面div内文字的变化。

我是黑板。

从测试的结果就可以看到各个浏览器对各个属性的支持情况了。例如我们可以发现IE不支持page属性，而FireFox则很好地支持该属性。

  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——修复错误