`
yanbingwei_13
  • 浏览: 22449 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

IE和Firefox中的事件

阅读更多
IE,Firefox中的事件对象Event:
在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。
Firefox支持几乎所有的W3C DOM二级标准,和部分W3C DOM三级标准。W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。
通常在W3C的DOM二级标准中,event作为发生事件的文档对象的属性。
在Firefox下JavaScript函数中获取event的方法:
1、从调用JavaScript函数的HTML页面显式传递参数event(实参的名称一定要用event) 。
2、若HTML元素的某个事件上直接绑定(在标签里绑定)了一个函数,则在该函数中可以通过event = arguments.callee.caller.arguments[0];来获取event对象。
3、function click(evt){
var event = evt||window.event;
}

document.onclick = click;


事件处理过程:
在 DOM二级标准中,事件处理过程比较复杂(功能比IE强大),当事件发生的时候,目标节点的事件处理程序就会被触发执行,但是目标节点的父节点也有机会来 处理这个事件。事件的传播分为三个阶段,首先是捕获阶段,事件从document对象沿着DOM树向下传播到目标节点,如果目标的任何一个父节点注册了捕 捉事件的处理函数,那么事件在传播的过程中就会首先运行这个函数。下一个阶段就是发生在目标节点自身了,注册在目标节点上的相应的事件处理函数就会执行; 最后是起泡阶段,事件将从目标节点向上传回给父节点,同样,如果父节点有相应的事件处理函数也会执行,最终传至document对象而结束。眼下,大多数 支持DOM二级标准的浏览器事件处理的始、终点是window对象(document对象的父节点)。在DOM二级标准中,为某个元素注册事件处理函数用 addEventListener(),移除用removeEventListener(),这两个方法都有三个参数,第一个是事件名称,第二个是处理函 数(句柄),第三个是一个布尔值,true表示指定的事件处理函数在捕获阶段执行,false表示在冒泡阶段。语法如下:
obj.addEventListener("eventName", funHandler, capture);
obj.addEventListener("eventName", funHandler, capture);
在 IE中,没有事件捕获阶段,只支持冒泡阶段。IE中事件的冒泡:IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理 函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如:有两个节点,其中一个是另一个的子节点,如果子 节点有onclick事件的处理函数,那么执行的情况就是先执行子节点的onclick事件处理函数,当事件冒泡到父节点上时再执行一次onclick事 件处理函数。在IE中,注册事件处理函数用attachEvent(),移除用detachEvent(),它们有两个参数:事件名称和处理函数(句 柄)。语法如下:
obj.attachEvent (on+ "eventName", funHandler);
obj.detachEvent (on+ "eventName", funHandler);
在IE中使用event.cancelBubble = true;来取消事件冒泡,在Firefox中用stopPropagation()方法来停止事件冒泡,即不要让别的元素看到该事件。

<i>:兼容IE、Firefox给obj添加(注册)单击事件
if(obj.attachEvent)  //for IE
{
obj.attachEvent("onclick", SelectClickRow);
// obj是table,单击table的某单元格时,SelectClickRow会执行多次
}
if(obj.addEventListener)  //for Firefox
{
obj.addEventListener("click", SelectClickRow, false);
}
//或者document.attachEvent?obj.attachEvent("onclick", SelectClickRow):obj.addEventListener ("click", SelectClickRow, false);

function SelectClickRow()
{
/* 由于SelectClickRow是通过attachEvent注册到对象的,而attachEvent没有绑定this引用,故:
在IE下 this == window
在Firefox中 this == obj
*/
var cell = window.event.srcElement; //srcElement是触发该事件的对象(在Table中是一个单元格),Firefox中使用target
var row = cell.parentNode;
row.style.backgroundColor = "#eeeeee";
}
取消(删除)单击事件
if(obj.detachEvent)  //for IE
{
obj. detachEvent("onclick", SelectClickRow);
}
if(obj.removeEventListener)  //for Firefox
{
obj.removeEventListener("click", SelectClickRow, false);
}

<ii>:旧规范提供的给obj添加(注册)单击事件
// 为obj添加(注册)单击事件,把一个函数的引用赋值给obj的一个事件属性
obj.onclick = DoClick; //只支持事件冒泡,且只能注册一个处理函数(会覆盖)
//若要传参数 obj.onclick = function(){ DoClick(parama); };

// obj单击事件的处理函数
function DoClick()
{
/* 这里this == obj,无论是IE还是Firefox,但是在Firefox下无法通过arguments.callee.caller.arguments[0]来获 取event对象。原因在于注册事件的方式为obj.onclick = DoClick;。 */
window.event.srcElement;
/* srcElement是触发单击事件处理函数的对象,Firefox中使用target(或者直接使用this)。在table中接收单击事件的对象是一 个单元格。The object of response event is a cell in table. */
}

此外,HTML中还有两种添加(注册)单击事件的方式:
<a href = "javascript: DoClick();" >Click </a>
<a href = "#" onclick = "javascript: DoClick(); return false;">Click </a>

Firefox 中的onchang事件与IE中onchange事件、onpropertychange事件:①、对于checkbox、input type="file"等元素,在Firefox中只要元素的内容一发生变化就触发onchang事件,而在IE中需等到元素失去焦点才触发 onchang事件;对于input type="text",FF和IE下一样,都是失去焦点之后才触发onchang事件。②、IE中当元素的属性值或内容一发生变化(含 JavaScript操作)就激发onpropertychange事件,Firefox无此事件。
分享到:
评论

相关推荐

    IE与Firefox的事件区别

    在不同的浏览器环境下,事件处理的实现机制有所差异,尤其是在Internet Explorer(IE)和Firefox之间。本文将深入探讨这些差异,以帮助开发者更好地理解和解决跨浏览器的兼容性问题。 首先,我们要了解事件流的概念...

    javascript在IE和Firefox中兼容性问题

    例如,`onchange`和`onblur`事件在IE和Firefox中的触发时间可能不同,开发者需要考虑到这些差异,以确保事件处理的一致性。 7. **body测试.html** `body`元素在不同浏览器中的加载时机和处理方式也可能有区别。在...

    BlueBala » 兼容IE和Firefox的事件模型(拖动)

    在IE中,我们可以通过`onmousedown`、`onmousemove`和`onmouseup`事件来实现拖动,而在Firefox中,我们可以使用`addEventListener`添加这些事件的监听器。但这样的做法会导致代码的不兼容性,因为IE不支持`...

    JavaScript在IE和Firefox(火狐)的不兼容问题解决

    标题与描述均聚焦于“JavaScript在IE和Firefox(火狐)的不兼容问题解决”,这表明文章旨在探讨并提供解决方案来处理在不同浏览器环境下的JavaScript兼容性问题,尤其是在Internet Explorer(IE)和Mozilla Firefox...

    在Firefox下直接调用IE浏览器(IETab这个插件).zip

    ".xpi"文件实际上是一个ZIP归档,包含所有必要的组件和资源,用户可以直接在Firefox中安装这个文件来添加IETab功能。 安装IETab插件的过程通常是这样的: 1. 下载"ie_tab_2-win.xpi"文件到本地计算机。 2. 打开Fire...

    js在IE和fireFox的区别

    ### JavaScript在Internet Explorer (IE) 和 Firefox 中的区别与解决方案 #### 一、获取HTML元素的方式差异 1. **通过ID获取元素**: - **IE**:支持`document.getElementById`和`document.all`两种方式。 - ...

    Javascript的IE和Firefox(火狐)兼容性

    **问题描述**:在IE和Firefox中捕获并处理鼠标移动事件的方式不同。 **解决方案**: - IE通过`setCapture()`和`releaseCapture()`方法。 - Firefox和其他现代浏览器通过`addEventListener()`和`removeEventListener...

    mxGraph破解包含ie和firefox

    mxGraph是一款强大的...通过以上方法,开发者可以逐步解决mxGraph在IE和Firefox中的兼容性问题,实现更广泛的支持。不过,随着IE的逐渐淘汰,重点可能更多地转移到如何优化mxGraph在现代浏览器和移动设备上的体验。

    IE和firefox调试插件

    调试JavaScript是网页开发中的重要环节,无论是在IE还是Firefox中,这些插件都提供了强大的JS调试功能。你可以设置断点,查看变量值,跟踪调用栈,这极大地提高了调试效率。对于CSS和HTML,开发者可以直接在页面上...

    DIV中兼容IE和Firefox的mouseleaves事件

    DIV中兼容IE和Firefox的mouseleaves事件

    让IE和火狐同时兼容

    特别是在早期的Web时代,Internet Explorer(简称IE)与Mozilla Firefox(简称火狐)这两款浏览器之间存在着显著的差异,这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    js在IE和Firefox不同之处

    ### js在IE和Firefox不同之处 在Web开发中,JavaScript(简称JS)是实现网页交互性的核心语言之一。然而,由于不同的浏览器对于JS标准的支持程度有所差异,这往往会导致跨浏览器兼容性问题的出现。IE(Internet ...

    Javascript在IE和FireFox中的兼容处理

    - 事件委托在Firefox中使用`addEventListener`,IE6-8使用`attachEvent`。可以使用`element.addEventListener || element.attachEvent`来兼容。 10. **父元素的区别问题** - IE使用`parentElement`,Firefox使用`...

    IE和Firefox的鼠标滚轮事件JavaScript代码

    1. **事件对象的差异**:IE和Firefox中,用于获取鼠标滚轮滚动方向的属性不同。 - 在IE中,使用 `event.wheelDelta` 来表示滚轮的变化量。 - 在Firefox中,则使用 `event.detail`。 2. **兼容性处理方案**:通过...

    Javascript的IE和Firefox兼容性参考

    JavaScript是一种广泛应用于网页开发的脚本语言,但在不同的浏览器中,其执行方式可能存在差异,特别是老版本的Internet Explorer(IE)和Firefox。由于历史原因,IE对某些特性有着独特的实现,而Firefox则遵循更...

    C# 实时获取IE和FireFox浏览器中URL

    经过三天的苦战,查询无数的国外网站终于实现了对IE和FireFox浏览器的URl地址实时监控。利用API和DDE分别对IE和FireFox进行了浏览器地址获取,完整的源码程序,与大家分享学习。后期将完善,实现对IE,FireFox,360,...

    IE和Firefox对JavaScript的兼容

    setTimeout和setInterval在IE中可能会因为页面失去焦点而暂停,而在Firefox中则不会。这种差异可能导致动画效果或者其他时间相关的功能在不同浏览器中表现不一致。 解决这些问题的方法通常包括使用条件注释、特征...

Global site tag (gtag.js) - Google Analytics