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内文字的变化。

click事件发生！
offsetX:168 offsetY:101
clientX:582 clientY:229
screenX:582 screenY:284