鼠标坐标的区分&冒泡事件

一、鼠标坐标被隐藏在事件的event参数里面，以下详解：

$("button").click(function(event) {
	//event.offsetX鼠标相对于“button标签”左上角的横坐标
	//event.clientX鼠标相对于“浏览器可见域”左上角的横坐标
	//event.pageX鼠标相对于“html文档”左上角的横坐标
	//event.screenX鼠标相对于“屏幕”左上角的横坐标
})

巧妙运用坐标，可以设置各种位移事件，甚至是放缩事件。

二、冒泡事件是js事件流：

"DOM2级事件”规定的事件流包含三个阶段：
（1）事件捕捉（Capturing）阶段：事件将沿着DOM树向下传送，经过目标节点的每一个祖先节点，直至目标节点。例如，用户单击了一个超链接，则该单击事件将从document节点转送到html元素、body元素以及包含该链接的p元素。目标节点就是触发事件的DOM节点。
（2）目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。
（3）冒泡（Bubbling）阶段：事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点直到document节点。该过程中的每一步，浏览器都将检测那些不是捕捉事件监听器的事件监听器并执行它们。（即：与触发事件无关的事件监听器也由于冒泡将被执行）。

《javaScript高级程序设计》规定0、1、2、3、4是捕获阶段，5、6、7、8、9是冒泡阶段，4（5）是目标阶段。

用event.preventDefault()方法，可以阻止浏览器的默认事件。
用event.stopPropagation()方法，可以阻止事件扩散，例如：用在4节点，可以阻止之后的冒泡事件。

我们在日常定义事件中，通常只在冒泡阶段注册事件，很少在捕获阶段注册事件。

//第三个参数不写时，默认为false
document.getElementByTagName("body").addEventListener("click",function(e){
	alert("body捕获事件被触发");
},true);
document.getElementByTagName("body").addEventListener("click",function(e){
	alert("body冒泡事件被触发");
},false);

//属于捕获事件
document.getElementByTagName("button").addEventListener("click",function(e){
	alert("button目标事件被触发");
},true);

//属于冒泡事件，jQuery无法注册捕获事件
$("button").click(function(e){
	alert("button目标事件被触发");
})

第一个事件会在2节点被触发，第二个事件会在7节点被触发，第三个事件会在4节点被触发，第四个事件会在5节点触发，在5节点的事件中添加event.stopPropagation()方法，将阻止后续的冒泡事件。

注：《JavaScript权威指南》第六版的捕获阶段是0、1、2、3；冒泡阶段是6、7、8、9；目标阶段是4、5；并且认为4阶段注册的捕获事件无法调用，但用谷歌实测发现4阶段的捕获事件可调用。