Javascript防冒泡事件与Event对象

防冒泡用到的就是event的属性和方法

案例一，鼠标点击判断

案例二，光标坐标

案例三，屏幕坐标

案例四，事件类型

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

属性

此事件发生在何时...

<a href="http://www.w3school.com.cn/jsref/event_onabort.asp">onabort</a>

图像的加载被中断。

<a href="http://www.w3school.com.cn/jsref/event_onblur.asp">onblur</a>

元素失去焦点。

<a href="http://www.w3school.com.cn/jsref/event_onchange.asp">onchange</a>

域的内容被改变。

<a href="http://www.w3school.com.cn/jsref/event_onclick.asp">onclick</a>

当用户点击某个对象时调用的事件句柄。

<a href="http://www.w3school.com.cn/jsref/event_ondblclick.asp">ondblclick</a>

当用户双击某个对象时调用的事件句柄。

<a href="http://www.w3school.com.cn/jsref/event_onerror.asp">onerror</a>

在加载文档或图像时发生错误。

<a href="http://www.w3school.com.cn/jsref/event_onfocus.asp">onfocus</a>

元素获得焦点。

<a href="http://www.w3school.com.cn/jsref/event_onkeydown.asp">onkeydown</a>

某个键盘按键被按下。

<a href="http://www.w3school.com.cn/jsref/event_onkeypress.asp">onkeypress</a>

某个键盘按键被按下并松开。

<a href="http://www.w3school.com.cn/jsref/event_onkeyup.asp">onkeyup</a>

某个键盘按键被松开。

<a href="http://www.w3school.com.cn/jsref/event_onload.asp">onload</a>

一张页面或一幅图像完成加载。

<a href="http://www.w3school.com.cn/jsref/event_onmousedown.asp">onmousedown</a>

鼠标按钮被按下。

<a href="http://www.w3school.com.cn/jsref/event_onmousemove.asp">onmousemove</a>

鼠标被移动。

<a href="http://www.w3school.com.cn/jsref/event_onmouseout.asp">onmouseout</a>

鼠标从某元素移开。

<a href="http://www.w3school.com.cn/jsref/event_onmouseover.asp">onmouseover</a>

鼠标移到某元素之上。

<a href="http://www.w3school.com.cn/jsref/event_onmouseup.asp">onmouseup</a>

鼠标按键被松开。

<a href="http://www.w3school.com.cn/jsref/event_onreset.asp">onreset</a>

重置按钮被点击。

<a href="http://www.w3school.com.cn/jsref/event_onresize.asp">onresize</a>

窗口或框架被重新调整大小。

<a href="http://www.w3school.com.cn/jsref/event_onselect.asp">onselect</a>

文本被选中。

<a href="http://www.w3school.com.cn/jsref/event_onsubmit.asp">onsubmit</a>

确认按钮被点击。

<a href="http://www.w3school.com.cn/jsref/event_onunload.asp">onunload</a>

用户退出页面。

描述

<a href="http://www.w3school.com.cn/jsref/event_altkey.asp">altKey</a>

返回当事件被触发时，"ALT" 是否被按下。

<a href="http://www.w3school.com.cn/jsref/event_button.asp">button</a>

返回当事件被触发时，哪个鼠标按钮被点击。

<a href="http://www.w3school.com.cn/jsref/event_clientx.asp">clientX</a>

返回当事件被触发时，鼠标指针的水平坐标。

<a href="http://www.w3school.com.cn/jsref/event_clienty.asp">clientY</a>

返回当事件被触发时，鼠标指针的垂直坐标。

<a href="http://www.w3school.com.cn/jsref/event_ctrlkey.asp">ctrlKey</a>

返回当事件被触发时，"CTRL" 键是否被按下。

<a href="http://www.w3school.com.cn/jsref/event_metakey.asp">metaKey</a>

返回当事件被触发时，"meta" 键是否被按下。

<a href="http://www.w3school.com.cn/jsref/event_relatedtarget.asp">relatedTarget</a>

返回与事件的目标节点相关的节点。

<a href="http://www.w3school.com.cn/jsref/event_screenx.asp">screenX</a>

返回当某个事件被触发时，鼠标指针的水平坐标。

<a href="http://www.w3school.com.cn/jsref/event_screeny.asp">screenY</a>

返回当某个事件被触发时，鼠标指针的垂直坐标。

<a href="http://www.w3school.com.cn/jsref/event_shiftkey.asp">shiftKey</a>

返回当事件被触发时，"SHIFT" 键是否被按下。

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

cancelBubble

如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。

fromElement

对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。

keyCode

对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。

offsetX,offsetY

发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

returnValue

如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。

srcElement

对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。

toElement

对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。

x,y

事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

下面列出了 2 级 DOM 事件标准定义的属性。

<a href="http://www.w3school.com.cn/jsref/event_bubbles.asp">bubbles</a>

返回布尔值，指示事件是否是起泡事件类型。

<a href="http://www.w3school.com.cn/jsref/event_cancelable.asp">cancelable</a>

返回布尔值，指示事件是否可拥可取消的默认动作。

<a href="http://www.w3school.com.cn/jsref/event_currenttarget.asp">currentTarget</a>

返回其事件监听器触发该事件的元素。

<a href="http://www.w3school.com.cn/jsref/event_eventphase.asp">eventPhase</a>

返回事件传播的当前阶段。

<a href="http://www.w3school.com.cn/jsref/event_target.asp">target</a>

返回触发此事件的元素（事件的目标节点）。

<a href="http://www.w3school.com.cn/jsref/event_timestamp.asp">timeStamp</a>

返回事件生成的日期和时间。

<a href="http://www.w3school.com.cn/jsref/event_type.asp">type</a>

返回当前 Event 对象表示的事件的名称。

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法

<a href="http://www.w3school.com.cn/jsref/event_initevent.asp">initEvent()</a>

初始化新创建的 Event 对象的属性。

<a href="http://www.w3school.com.cn/jsref/event_preventdefault.asp">preventDefault()</a>

通知浏览器不要执行与事件关联的默认动作。

<a href="http://www.w3school.com.cn/jsref/event_stoppropagation.asp">stopPropagation()</a>

不再派发事件。

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5999844.html，如需转载请自行联系原作者