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">

<head>

<title>Untitled Document</title>

</head>

</script>

<body>

<a id="myLink" href="http://fego.home.cn/members/wg/default.aspx"

target="_blank">

mouseDown me

</a>

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">

<head>

<title>Untitled Document</title>

</head>

</script>

<body>

<div id="mydiv">mouseDown me</div>

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">

<head>

<title>Untitled Document</title>

</head>

</script>

<body>

<div id="mydiv">mouseDown me</div>

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">

<head>

<title>Untitled Document</title>

</head>

<body>

<a id="myLink" href="http://home.fego.cn/members/wg/default.aspx">Link Test Event</a>

</div>

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对象的文档层次。

#javascript/ajax专栏

IE和FireFox的Javascript的事件和事件处理总结相关推荐

【总结】IE和Firefox的Javascript兼容性总结
长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...
Javascript知识——事件
O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
JavaScript为事件处理器传递参数 (转）
首先参考:javascript attachEvent和addEventListener 使用方法 attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEve ...
JavaScript中事件回顾
事件其实在第一次学习JavaScript的时候就接触了,一行非常简单的代码 alert('Hello JavaScript!!!')就诠释了什么是事件.事件是什么呢?事件在基于浏览器编程的语言Java ...
JavaScript 事件模型事件处理机制
这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们 ...
JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
Javascript之事件(一)
事件流事件流描述的是页面接收事件的顺序.IE的事件流是冒泡流,而 Netscape Communicator的事件流是事件捕获流. 事件冒泡是指事件开始时由最具体的元素,然后向上传播到较为不具体的节 ...
Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述自定义事件很难 ...

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

IE和FireFox的Javascript的事件和事件处理总结相关推荐

最新文章

热门文章