开发者社区> 技术小牛人> 正文

IE和FireFox的Javascript的事件和事件处理总结

简介:
+关注继续查看
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

使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.getElementByIdx("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.getElementByIdx("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.getElementByIdx("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.getElementByIdx("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对象的文档层次。

本文转自 netcorner 博客园博客,原文链接: http://www.cnblogs.com/netcorner/archive/2007/12/04/2912249.html ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
snk
Angular vs React vs Vue vs UISYS 的事件绑定方式对比(新手必看)
web三大框架和 airoot uisys 都给大家介绍了一番。在事件绑定上都很棒,除了angluar 有些小伙伴会疑问,angluar为啥那么复杂,其实 angluar 设计之初就为大型企业项目考虑了很多,而且他的组件是最成熟的,React 和 Vue 毕竟不是做成google 那么复杂,所以angluar开始学的时候,感觉有点“脱裤子放屁的感觉”,但是你学深入了,你就明白作者的困境了。
1114 0
20个优秀的 JavaScript 键盘事件处理库
  键盘事件是 Web 开发中最常用的事件之一,通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验。下面,我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库,帮助开发人员轻松处理各种键盘事件,赶紧收藏吧! 您可能感兴趣的相关文章 让人惊叹的 Chrome 浏览器实验项目 10个最好的 JavaScript 动画库和开发框架 全端必备!10个最好的 Node.
1039 0
javascript练习题-事件
  前端javascript练习题-事件  键盘控制div移动如果需要在页面中移动,要将元素脱离文档流(否则会影响页面布局) js实现代码: var odiv=document.getElementsByTagName("div")[0]; document.
560 0
Hibernate基于注解方式的各种映射全面总结
1. 使用Hibernate Annotation来做对象关系映射  1) 添加必须包:      hibernate-jpa-2.0-api-1.0.0.Final.jar  2) 在实体类中添加JPA的标准注解来进行对象关系映射.注解可以添加在属性上,也可以添加在getXxx()方法之上。
909 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载