`
a_bun
  • 浏览: 20403 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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>
 

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

在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/javascript">
    function tdclick(){
        if(event.srcElement.tagName.toLowerCase()=='td')
             alert("行："+(event.srcElement.parentNode.rowIndex+1)+"列："+(event.srcElement.cellIndex+1));
     }
</script>

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()
{
var evt=getEvent();
var element=evt.srcElement || evt.target;
}

function getEvent()
{
if(document.all)
{
return window.event;//如果是ie
}
func=getEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
||(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
{
return arg0;
}
}
func=func.caller;
}
return null;
}

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

1.this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);

比如：event.target和$(event.target)的使用：

01 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
02 < html xmlns = "http://www.w3.org/1999/xhtml " >
03 < head >
04 < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
05 < title >无标题文档</ title >
06 < script type = "text/javascript" src = "http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js " ></ script >
07 < script type = "text/javascript" >
08 $(function(){
09 $("li").live("click",function(event){
10 $("#temp").html("clicked: " + event.target.nodeName);
11 $(event.target).css("color","#FF3300");
12 })
13 });
14 </ script >
15 </ head >
16  
17 < body >
18 < div id = "temp" ></ div >
19 < ul class = "JQ-content-box" style = "padding:20px; background:#FFFFFF" >
20 < li >第一行
21 < ul >
22 < li >这是公告标题1</ li >
23 < li >这是公告标题2</ li >
24 < li >这是公告标题3</ li >
25 < li >这是公告标题4</ li >
26 </ ul >
27 </ li >
28 </ ul >
29 </ body >
30 </ html >

上面的例子如果改成使用this：

01 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
02 < html xmlns = "http://www.w3.org/1999/xhtml " >
03 < head >
04 < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
05 < title >无标题文档</ title >
06 < script type = "text/javascript" src = "http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js " ></ script >
07 < script type = "text/javascript" >
08 $(function(){
09 $("li").live("click",function(event){
10 $("#temp").html("clicked: " + event.target.nodeName);
11 $(this).css("color","#FF3300");
12 event.stopPropagation();
13 })
14 });
15 </ script >
16 </ head >
17  
18 < body >
19 < div id = "temp" ></ div >
20 < ul class = "JQ-content-box" style = "padding:20px; background:#FFFFFF" >
21 < li >第一行
22 < ul >
23 < li >这是公告标题1</ li >
24 < li >这是公告标题2</ li >
25 < li >这是公告标题3</ li >
26 < li >这是公告标题4</ li >
27 </ ul >
28 </ li >
29 </ ul >
30 </ body >
31 </ html >

 

分享到：
| jquery为动态生成元素绑定传参数事件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    兼容IE和Firefox获得keyBoardEvent对象

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

    ie firefox 兼容问题大全

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

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

    在IE中，可以通过`window.event`来访问事件对象，而在Firefox等现代浏览器中，则需要通过参数传递或者`event`全局变量来获取事件对象。为了编写兼容的事件处理代码，应当检查是否存在事件对象参数，如果不存在，则...

    js在IE和fireFox的区别

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

    Javascript的IE和Firefox兼容性参考

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

    ie 和 firefox 的javascript 兼容问题（网上下载的）.doc

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

    浏览器兼容性问题收集(IE,Firefox,Chrome,Safri)

    IE 和 Firefox 获取鼠标位置的方式不同，IE 使用 `event.clientX` 和 `event.clientY` 属性，而 Firefox 需要在事件函数中传递事件对象来获取鼠标位置。 6. DIV 元素的边界问题 IE 和 Firefox 处理 DIV 元素边界的...

    event兼容调用（IE，Firefox，Chrome)

    本文将深入探讨在Internet Explorer（IE）、Firefox、Chrome三大主流浏览器中实现event兼容调用的方法，重点解析事件对象的获取及鼠标坐标获取的差异。 #### 事件对象的兼容性获取 在JavaScript中，事件处理通常...

    js在IE和Firefox不同之处

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

    js在IE与firefox的差异集锦

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

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

    - **事件对象**：IE中的`window.event`全局变量用于获取事件信息，而Firefox中事件信息在事件处理函数的参数中。解决方法是在事件处理函数中接受`event`参数，并检查其是否存在。 9. **坐标属性** - **鼠标坐标**...

    IE火狐不同点集锦

    IE中直接使用`event.clientX`和`event.clientY`，但在Firefox中需要通过事件对象传递并使用`pageX`和`pageY`属性。 #### 6. DIV等元素的边界问题 IE和Firefox在计算元素边界时有所不同。IE计算时会包括边框宽度，而...

    javascript在IE和Firefox中兼容性问题

    IE提供了ActiveXObject，可以创建XMLDOM对象，如`new ActiveXObject("MSXML2.DOMDocument")`，而Firefox和其他遵循W3C标准的浏览器则使用`document.implementation.createDocument()`方法。 2. **ChildNodes测试....

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

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

    IE 与FireFox 区别概要总结

    - IE中，`window.event`可以全局访问事件对象，但在Firefox中，事件对象只在事件处理函数内部可用。可以创建一个函数如`getEvent`来获取事件对象，并在处理函数中传递事件。 5. 获取HTML元素： - IE支持`document...

    Javascript在IE和FireFox中的兼容处理

    - IE使用全局的`event`对象，Firefox则将`event`作为事件处理函数的参数传递。可以使用`arguments[0]`作为兼容方式。 6. **event对象的坐标问题** - IE使用`event.clientX`和`event.clientY`，Firefox使用`event....

    IE和Firefox对JavaScript的兼容

    IE有时会忽视标准的style属性，而是使用专有的currentStyle属性来获取元素的样式，而Firefox使用window.getComputedStyle()。此外，对于某些CSS属性，如透明度，IE使用filter属性，Firefox则使用opacity。 IE和Fire...

    让Firefox支持event对象实现代码

    在JavaScript编程中，特别是在处理浏览器兼容性问题时，Firefox与Internet Explorer（IE）在处理事件对象上有显著的差异。在IE中，`window.event`是一个全局变量，可以用来获取当前事件的信息，如事件类型、目标元素...

Magicbox
Global site tag (gtag.js) - Google Analytics