Javascript Event事件中IE与标准DOM的比较

事件流的区别

IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件
示例:
复制代码 代码如下:
<body>
<div>
<button>点击这里</button>
</div>
</body>

冒泡型事件模型: button->div->body (IE事件流)

捕获型事件模型: body->div->button (Netscape事件流)

DOM事件模型: body->div->button->button->div->body (先捕获后冒泡)

2.事件侦听函数的区别

IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定

DOM使用:
[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定

bCapture参数用于设置事件绑定的阶段,true为捕获阶段,false为冒泡阶段。

示例代码:
复制代码 代码如下:
function addEventHandler(object,eventType,fnHandler){
if(object.addEventListener){ //DOM
object.addEventListener(eventType, fnHandler, false);
}else if(object.attachEvent){ //IE
object.attachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=fnHandler;
}
}
function removeEventHandler(object,eventType,fnHandler){
if(object.removeEventListener){ //DOM
object.removeEventListener(eventType, fnHandler, false);
}else if(object.detachEvent){ //IE
object.detachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=null;
}
}
addEventHandler(oDiv,"click",function(){alert("clicked")});

3.事件对象定位(获取)

IE:事件对象是window对象的一个属性event,event只能在事件发生时访问,事件处理函数执行完毕,事件对象被销毁。

示例:
复制代码 代码如下:
document.onclick=function(){
alert(window.event.type);
}

DOM:event对象必须作为唯一的参数传递给事件处理函数,且必须为第一个参数。

示例:
复制代码 代码如下:
document.onclick=function(){
alert(arguments[0].type);
}

4.获取目标(target)
IE:var oTarget=oEvent.srcElement;
DOM:var oTarget=oEvent.target;

5.阻止事件默认行为

IE:oEvent.returnValue=false;
DOM:oEvent.preventDefault();

示例:
复制代码 代码如下:
//屏蔽网页右键菜单
document.body.oncontextmenu=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}

6.停止事件复制(冒泡)
IE:oEvent.cancelBubble=true;
DOM:oEvent.stopPropagation();

示例:

复制代码 代码如下:
button.onclick=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}

时间: 2024-09-27 19:32:05

Javascript Event事件中IE与标准DOM的比较的相关文章

javascript event事件绑定,兼容IE6 attachEvent

Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):   [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录.] 1.在DOM中,直接用onXXX="fun();"进行绑定 2.在Javascript代码中用 DOM对象.onXXX=fun 进行绑定 3.用 DOM对象.attachEvent("onXXX",fun) 进行绑定 4.用<script for=

javascript event 事件解析 .

描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效.  event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和  onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. < HTML> <HEAD><TITLE>Cancels Links

javascript event 事件解析_javascript技巧

event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</TITLE> <SCRIPT LANGUAGE="JScript&qu

JavaScript Event事件学习第一章 Event介绍_javascript技巧

没有event就没有脚本.可以看看任何有JavaScript代码的网页:几乎所有的例子都有一个事件触发了脚本.原因非常简单.JavaScript就是给你的页面添加内部活动:用户做一些事情然后页面做出回应. 因此JavaScript就需要一个方法能够检测到用户的动作然后才能知道什么时候做出反应.这还需要知道那个函数会被执行,函数会做一些你认为的给你的网页增色的动作.这些文字描述了如何去写这样的脚本.虽然不容易,但是这是一个很让人满足的工作. 当用户做了什么事情event就发生了,当然还有一些eve

浅析javascript中的Event事件_javascript技巧

1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式:    1.点击 2.tab 3.js 2.(例子:输入框提示文字) onfocus:当元素获取焦点时触发:        element.onfocus = function(){};   onblur:当元素失去焦点时触发:        element.onblur = function(){};    obj.focus() 给指定的元素设置焦点 obj.blur() 取消指定

javascript中window.event事件用法详解_基础知识

前两天写程序时因为要用到javascript中的window.event事件,于是就在网上搜了一下,终于找到一篇不错的文章,来与大家分享下: 描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子下面的例子检查鼠标是否在链接上单击,并且,如

深入解析PHP的Yii框架中的event事件机制_php技巧

事件事件可以将自定义代码"注入"到现有代码中的特定执行点.附加自定义代码到某个事件,当这个事件被触发时,这些代码就会自动执行.例如,邮件程序对象成功发出消息时可触发 messageSent 事件.如想追踪成功发送的消息,可以附加相应追踪代码到messageSent 事件. Yii 引入了名为 yii\base\Component 的基类以支持事件.如果一个类需要触发事件就应该继承 yii\base\Component 或其子类. Yii的event机制YII的事件机制,是其比较独特之处

JavaScript Event学习第五章 高级事件注册模型_javascript技巧

W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型.虽然对于微软的模型我不是很感冒,但是w3c的还是不错的,除了这个鼠标定位 的问题.不过现在只有小部分浏览器支持. W3C W3C的DOM层面事件规范注意到了传统模式的问题.他对于你想在一个元素上绑定多个事件提供了一个很好的解决办法. W3C事件注册模型的关键就是addEventListener().你给他三个参数:事件类型,要执行的函数和一个布尔值(true或者false)我一会再解释.把我们熟知的doSomething

javascript移动开发中touch触摸事件详解_javascript技巧

事件对象是用来记录一些事件发生时的相关信息的对象.事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁! W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 IE将事件对象作为window对象的一个属性(相当于全局变量) originalEvent对象 在一次偶然的使用中,我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined,打印e发现,它的事件对象不是原生的事件对象.经查阅发现