`
ynztpwl
  • 浏览: 59571 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS获取事件对象,获取事件的源对象(Firefox,IE)

 
阅读更多

做笔记,以防自己忘记~~ JS获取事件event,不同浏览器有不同的做法。

例如IE下,在js函数中,通过window.event就可以获取,不必在函数中添加什么参数。

也可以用Prototype或者JQuery等,它们有他们对事件的包装。还是使用JS库比较好,不然就有下边的麻烦

Firefox要传递参数

<head> <script> function click1(event,str1){ alert(event+str1); } </script> </head> <body> <input type="button" id="abc" onclick="click1(event,'kenko');" value="click me"/> </body>

IE不需要传递参数

<head> <script> function click1(){ alert(event.srcElement.value); } </script> </head> <body> <input type="button" id="abc" onclick="click1();" value="click me"/> </body>

event.srcElement

event.srcElement.id

================================================================================

在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.。

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.。同时注意event的 兼容性问题。

感觉这个挺好,可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。
注意获取的标记都以大写表示,如"TD","TR","A"等。所以把看过的一些抄下来,不记得的时候再来看看。

<script type="text/javas<wbr>cript"&gt;<br style="line-height:normal"> function tdclick(){<br style="line-height:normal"> if(event.srcElement.tagName.toLowerCase()=='td')<br style="line-height:normal"> alert("行:"+(event.srcElement.parentNode.rowIndex+1)+"列:"+(event.srcElement.cellIndex+1));<br style="line-height:normal"> }<br style="line-height:normal"> &lt;/script&gt;</wbr>

event.srcElement从字面上可以看出来有以下关键字:事件,源 他的意思就是:当前事件的源,

我们可以调用他的各种属性 就像:document.getElementById("")这样的功能,

经常有人问 firefox 下的 event.srcElement 怎么用,在此详细说明:

IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:

firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

在 ie中处理事件直接使用window.event对象即可,但在firefox中,是没有 window.event对象的,函数需要使用事件的时候,需要在事件发生时把事件作为参数传递给函数,不象在ie中,事件对象是全局的,随处都可以访 问.下面这个getEvent()函数可以兼容firefox和ie,只需要在访问事件对象的函数的开始调用getEvent()即可,不用再把事件作为 参数传递.以下代码已经实验通过!

function myfunc()
{
<wbr style="line-height:normal"><span style="font-size:13px">var evt=getEvent();</span><br style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">var element=evt.srcElement || evt.target;</span><br style="line-height:normal"><span style="font-size:13px">}</span></wbr></wbr>

function getEvent()
{
<wbr style="line-height:normal"><span style="font-size:13px">if(document.all)</span><br style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">{</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">return window.event;//如果是ie</span><br style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">}</span><br style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">func=getEvent.caller;</span><br style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">while(func!=null)</span><br style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">{</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">var arg0=func.arguments[0];</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">if(arg0)</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">{</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">if((arg0.constructor==Event || arg0.constructor ==MouseEvent)</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">||(typeof(arg0)=="object" &amp;&amp; arg0.preventDefault &amp;&amp; arg0.stopPropagation))</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">{</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">return arg0;</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">}</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">}</span><br style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">func=func.caller;</span><br style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">}</span><br style="line-height:normal"><wbr style="line-height:normal"><span style="font-size:13px">return null;</span><br style="line-height:normal"><span style="font-size:13px">}</span></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

分享到:
评论

相关推荐

    兼容IE和Firefox获得keyBoardEvent对象

    IE中可以使用()或[]获取集合类对象,而Firefox中只能使用[]获取集合类对象。解决方法是统一使用[]获取集合类对象。 3. 自定义属性问题 IE中可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()...

    js获取电脑名、ip、mac(ie&火狐)

    在IE浏览器中,JavaScript可以通过ActiveXObject对象来访问Windows API,获取电脑的一些基本信息。`ActiveXObject`是IE特有的,允许JavaScript与COM组件交互。以下是一个示例代码片段,用于获取电脑名称: ```...

    Javascript中获取对象的原型对象的方法小结

    在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象。 代码如下: &lt;!– lang: js –&gt; function F(){}; var foo = new F(); alert&#40;foo.__proto__ == F.prototype&#41;; ...

    js中获取事件对象的方法小结

    这种方式在Firefox、Safari、Chrome中均能正确获取事件对象,但在IE中会报错,因为IE不支持通过`arguments`获取事件对象。 此外,为了查看事件处理函数本身,可以使用`arguments.callee`。这个属性返回调用时的函数...

    js键盘事件全面控制_兼容FireFox和IE

    在 FireFox 和 Opera 中,可以使用 e.which 属性来获取键盘事件对象,而在 IE 中,可以使用 event.keyCode 属性来获取键盘事件对象。例如: FireFox 和 Opera: ``` function keyDown(e) { var keycode = e.which;...

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

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

    Javascript的IE和Firefox兼容性参考

    - IE浏览器提供了全局的`window.event`对象,用来获取当前事件的信息,但Firefox不支持。解决办法是在事件处理函数中传递事件对象,如`onclick="gotoSubmit(event)"`,然后在函数内部使用`evt = evt || (window....

    js在IE与firefox的差异集锦

    在IE中可以通过event对象的clientX和clientY属性来获取鼠标位置,而在Firefox中需要将事件对象作为参数传递给事件处理函数,并通过pageX和pageY属性来获取鼠标位置。 6. DIV等元素的边界问题: 不同浏览器在解析CSS...

    js在IE和Firefox不同之处

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

    ie firefox 兼容问题大全

    - **问题描述**:在IE和部分版本的Firefox中,可以通过`window.location`或`window.location.href`获取当前页面的URL;但在某些旧版本的Firefox中,只能使用`window.location`。 - **解决方案**:建议始终使用`...

    js在IE和fireFox的区别

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

    JS的IE和Firefox兼容性

    JavaScript在不同浏览器之间的兼容性问题一直是开发者面临的重要挑战,尤其是早期的Internet Explorer(IE)和Mozilla Firefox(MF)之间存在显著差异。以下是一些关键的兼容性问题及其解决方案: 1. **document....

    ie 和 firefox 的javascript 兼容问题(网上下载的).doc

    IE 和 Firefox 对事件源元素的访问方式不同。 **说明:** - **IE环境下**,事件对象包含 `srcElement` 属性,但没有 `target` 属性。 - **Firefox环境下**,事件对象包含 `target` 属性,但没有 `srcElement` 属性...

    Javascript在IE和FireFox中的兼容处理

    以上只是JavaScript在IE与Firefox中兼容性问题的一部分,实际开发中可能遇到更多细节。解决这些问题需要对两种浏览器的特性有深入理解,并使用条件注释、polyfills和现代JavaScript库(如jQuery)来确保代码在各种...

    css和javascript在IE和Firefox中二十三个不同点

    CSS和JavaScript在Internet Explorer(IE)和Firefox这两个浏览器中存在诸多差异,这些差异主要体现在DOM操作、属性访问、事件处理等方面。以下是一些关键的不同点: 1. **文档对象模型(DOM)操作** - **form元素...

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

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

    JavaScript 获取事件对象的注意点

    本文主要探讨在JavaScript中获取事件对象时需要注意的问题,特别是针对Firefox浏览器的特异性。 首先,通常我们获取事件对象的两种常见方法是: 1. 在非IE浏览器中,事件对象会自动作为参数传递给事件处理函数,...

    Javascript的IE和Firefox兼容性问题集合

    3. **CSS样式获取**:IE使用`currentStyle`对象获取元素样式,而Firefox等其他浏览器使用`window.getComputedStyle`。可编写函数统一获取: ```javascript function getStyle(element, styleProp) { if (element....

    javascript在firefox与ie下的兼容性总结

    JavaScript在Firefox和IE之间的兼容性问题一直是前端开发者面临的一大挑战。由于这两个浏览器内核的不同,导致在处理某些JavaScript特性时存在差异。以下是一些常见的兼容性问题及其解决方案: 1. **Document.form....

Global site tag (gtag.js) - Google Analytics