使IE和FireFox事件停止的方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <script type="text/javascript"> </script> <body> <input name="Hello" type="button" value="Hello" onclick="Show(this)" /> <a id="myLink" href="http://fego.home.cn/members/wg/default.aspx" target="_blank"> mouseDown me </a> <script type="text/javascript"> var myLink = document.getElementById("myLink"); var oldHandler = myLink.onclick; function newHandler() { alert("new handler"); //去掉下面的注释，就会将事件关闭。 //return false; } function newHandler1() { alert("I can’t Show"); } myLink.onclick = function(){ if(oldHandler!=undefined) oldHanlder(); return newHandler(); } </script> </body> </html> |
通常，如果浏览器执行某种默认动作来响应一个事件，那么可以返回false阻止浏览器执行相应的动作。
判断DOM标准的方法：document.implementation.hasFeature(“Events”,”2.0”);
IE的事件：
由于IE不支持DOM2的事件模型，那么我们只有为IE编写特定的事件模型：
在DOM2的模型中，我们可以使用addEventListener来添加新的事件函数，而我们可以在
IE中添加一个新的函数来处理事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <script type="text/javascript"> </script> <body> <input name="Hello" type="button" value="Hello" onclick="Show(this)" /> <div id="mydiv">mouseDown me</div> <script type="text/javascript"> var mydiv = document.getElementById("mydiv"); var oldHandler = mydiv.onclick; function newHandler() { alert("new handler"); } mydiv.onclick = function(){ newHandler(); if(oldHandler!=undefined) oldHanlder();} </script> </body> </html> |
IE Event对象,只能通过window.event
Event属性 | 作用 |
type | 与DOMEvent的type相同 |
srcElement | 发生事件的文档元素。与DOM Event对象的target属性兼容 |
button | 1表示左键，2表示右键，4表示中间键 |
clientX,clientY | 同DOM的MouseEvent对象的同名属性兼容 |
offsetX,offsetY | 相对于源元素的位置。 |
altKey,ctrlKey, shitfKey | 同DOM |
keyCode | 得到Keydown，keyup事件的键代码的Unicode |
fromElement, toElement | fromElement声明mouseover事件中鼠标移动过的文档元素。 toElement声明mouseout事件中鼠标移到文档元素。它们等价于2级DOM中的MouseEvent对象的relatedTarget属性。 |
cancelBubble | 把它设为true，可以组织当前事件进一步气泡到包容层次的元素。 |
returnValue | 可以组织浏览器执行与事件相关的默认动作。 |
FireFox的事件总结：
由于FireFox支持DOM2的事件模型，而且我们也可以使用IE定义事件的方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <script type="text/javascript"> </script> <body> <input name="Hello" type="button" value="Hello" onclick="Show(this)" /> <div id="mydiv">mouseDown me</div> <script type="text/javascript"> var mydiv = document.getElementById("mydiv"); function down() { alert('down'); } mydiv.onclick = down; mydiv.addEventListener("click",function(e){ alert("down2");},false); </script> </body> </html> |
由于FireFox的支持DOM2的事件模型。所以我们可以使用:
得到FireFox的事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <body> <div id="myDiv"> <a id="myLink" href="http://home.fego.cn/members/wg/default.aspx">Link Test Event</a> </div> <script type="text/javascript"> function TestThis(event) { alert(this.href); alert(event); alert(typeof event.preventDefault); alert(event.screenX); alert(event.screenY); alert(event.clientX); alert(event.clientY); } var myLink = document.getElementById("myLink"); myLink.addEventListener("click",TestThis,true); </script> </body> </html> |
DOM2的事件模型函数 | 作用 |
addEventListener | 添加事件监听函数。 |
removeEventListener | 删除事件监听函数。 |
preventDefault | 组织默认事件的发生 |
stopPropagation | 可以组织事件从当前正在处理它的节点传播 |
createEvent | 创建事件 |
Event属性 | 作用 |
type | 发生的事件的类型 |
target | 发生事件的节点 |
currentTarget | 发生当前在处理的事件的节点 |
eventPhase | 指明了当前事件传播过程。 Event.CAPTURING_PHASE,Event.AT_TARGET,Event.BUBBLING_PHASE |
timestamp | 一个Date对象，声明了事件何时发生 |
bubbles | 一个布尔值，是否在文档树中气泡 |
cancelable | 一个布尔值，是否能用preventDefault |
作用的对象类型DOMFocusIn,DOMFocusOut和DOMActivate。
UIEvent属性 | 作用 |
view | 发生事件的Window对象 |
detail | 一个数字，对于click事件，mousedown，mouseup的事件。1代表点击一次，2代表双击，3代表点击三次。 对于DOMActivate事件,这个字段的值为1，表示正常激活，2表示超级激活，例如双击鼠标或同时按下Shift和Enter键。 |
MouseEvent属性 | 作用 |
button | 0表示左键，1表示中间键，2表示右键。 |
altKey,ctrlKey,metaKey ,shitKey | 是否Alt键，Ctrl键，Meta键，Shift键。 |
clientX,clientY | 声明鼠标指针相对客户区或浏览器窗口的X坐标和Y坐标。 |
screenX,screenY | 声明鼠标指针相对于用户显示器的左上角X坐标和Y坐标。 |
relateTarget | 对于mouseover事件，它是鼠标移动到目标上时所离开的那个节点。对于mouseout事件，他是离开目标时，鼠标进入节点。 |
事件传播三个阶段：1，捕捉阶段，事件从Document对象沿着文档树向下传播给目标节点。
2，目标节点触发阶段：在目标上的适合的事件处理程序将运行。3，气泡阶段，在这个阶段，事件将从目标元素向上传播或者气泡回Document对象的文档层次。