firefox事件处理之自动查找event的函数（用于onclick=foo()）

IE与firefox事件处理
在ie中，事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发
的，还是其他事件， 都会更新window.event 对象。 所以在代码中，只要轻松调用 window.event
就可以轻松获取 事件对象， 再 event.srcElement 就可以取得触发事件的元素进行进一步处理
在ff中， 事件对象却不是全局对象，一般情况下，是现场发生，现场使用，ff把事件对象自动传
递给对应的事件处理函数。 在代码中，函数的第一个参数就是ff下的事件对象了。
以上是我个人对两个浏览器下的事件处理方法的粗浅理解，可能说得不是很明白，我写些代码来
详细说明一下


代码如下:

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<script>
window.onload=function(){
document.getElementById("btn1").onclick=foo1
document.getElementById("btn2").onclick=foo2
document.getElementById("btn3").onclick=foo3
}
function foo1(){
//ie中， window.event使全局对象
alert(window.event) // ie下，显示 "[object]" , ff下显示 "undefined"
//ff中， 第一个参数自动从为 事件对象
alert(arguments[0]) // ie下，显示 "undefined", ff下显示 "[object]"
}
function foo2(e){
alert(window.event) // ie下，显示 "[object]" , ff下显示 "undefined"
//注意，我从来没有给 foo2传过参数哦。 现在 ff自动传参数给 foo2, 传的参数e 就是事件对象了
alert(e) // ie下，显示 "undefined", ff下显示 "[object]"
}
function foo3(){ //同时兼容ie和ff的写法,取事件对象
alert(arguments[0] || window.event) // ie 和 ff下，都显示 "[object]"
var evt=arguments[0] || window.event
var element=evt.srcElement || evt.target //在 ie和ff下 取得 btn3对象
alert(element.id) // btn3
}
</script>

看到这里，我们似乎对 ie和ff的事件处理方式都已经理解了，并找到了解决的办法。
但是。。。。事情还没有结束。
看代码


代码如下:

<button id="btn" onclick="foo()">按钮1</button>
<script>
function foo(){
alert(arguments[0] || window.event)
}
</script>

很不幸，我们 foo给我们的结果是 undefined, 而不是期望的 object
原因在于 事件绑定的方式
onclick="foo()" 就是直接执行了， foo() 函数,没有任何参数的，
这种情况下 firefox没有机会传递任何参数给foo
而 btn.onclick=foo 这种情况， 因为不是直接执行函数，firefox才有机会传参数给foo
解决方法：
方法一：比较笨的方法，既然 firefox没有机会传参数，那么自己勤快点，自己传

代码如下:

<button id="btn" onclick="foo(event)">按钮</button>
<script>
function foo(){
alert(arguments[0] || window.event)
var evt=arguments[0] || window.event
var element=evt.srcElement || evt.target
alert(element.id)
}
</script>

方法二： 自动查找


代码如下:

<button id="btn4" onclick="foo4()">按钮4</button>
<script>
function foo4(){
var evt=getEvent()
var element=evt.srcElement || evt.target
alert(element.id)
}
function getEvent(){ //同时兼容ie和ff的写法
if(document.all) return window.event;
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;
}
</script>

方法二由 lostinet原创，我在其基础上有所改进， 原函数如下


代码如下:

function SearchEvent()
{
//IE
if(document.all)
return window.event;
func=SearchEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if(arg0.constructor==Event)
return arg0;
}
func=func.caller;
}
return null;
}

简单总结：
以上两个解决方法中，都正确处理 ff和ie下 的事件处理 （不管是onclick="foo()",方式还是 onclick=foo方式）
但是个人建议用 getEvent() 方法来统一处理 事件问题。

赞 (0)

相关推荐

  • jquery 事件对象属性小结

    使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入: $("#testDiv").bind("click", function(event) { }); 关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events

  • JavaScript 事件对象的实现

    比如,我们定义了一个Classroom对象,这里我们定一个事件,当教室里的人增加超60人时就触发一个事件onFull;具体定义如下: 复制代码 代码如下: var Classroom=function() { this.numberOfPeople=0; this.onFull=null; this.peopleEnter=function(number) { this.numberOfPeople+=number; if(this.numberOfPeople>60&&this.o

  • Js获取事件对象代码

    一般做法: 复制代码 代码如下: <input type="button" id="test" value="点我测试" /> <script type="text/javascript"> var testBtn = document.getElementById('test'); testBtn.onclick = testFun; function testFun(e) { var evt = e

  • JavaScript 获取事件对象的注意点

    平时我们获取事件对象一般写法如下: 复制代码 代码如下: function getEvent(event) { return event || window.event // IE:window.event } 如果没有参数,也可写成(非IE :事件对象会自动传递给对应的事件处理函数,且为第一个参数): 复制代码 代码如下: function getEvent() { return arguments[0] || window.event // IE:window.event } 这样的写法在除

  • firefox事件处理之自动查找event的函数（用于onclick=foo()）

    IE与firefox事件处理 在ie中,事件对象是作为一个全局变量来保存和维护的. 所有的浏览器事件,不管是用户触发 的,还是其他事件, 都会更新window.event 对象. 所以在代码中,只要轻松调用 window.event 就可以轻松获取 事件对象, 再 event.srcElement 就可以取得触发事件的元素进行进一步处理 在ff中, 事件对象却不是全局对象,一般情况下,是现场发生,现场使用,ff把事件对象自动传 递给对应的事件处理函数. 在代码中,函数的第一个参数就是ff下的事件

  • 利用jQuery的$.event.fix函数统一浏览器event事件处理

    比如得到触发事件的元素引用在IE浏览器下是:event.srcElement,在FF浏览器下则是:event.target,另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX,而IE浏览器下的处理方式又是不一样的,当然还有一些像"阻止事件冒泡"以及"取消浏览器默认行为"等,不同浏览器也有不同的处理方式,如果我们要使JavaScript在不同的浏览器下能正常处理事件代码,就要分别进行判断处理.现在jQuery为我们提供了统一兼容处理函数$.even

  • ThinkPHP自动完成中使用函数与回调方法实例

    本文实例讲述了ThinkPHP自动完成中使用函数与回调方法.分享给大家供大家参考.具体方法如下: ThinkPHP 自动填充格式如下: 复制代码 代码如下: array(填充字段,填充内容[,填充条件][,附加规则]) 附加规则,可选,包括: string:字符串,表示填充内容为字符串(默认). function:使用函数,表示填充的内容是一个函数返回值. callback:使用方法,表示填充的内容是一个当前 Model 的方法返回值. field:字段,表示填充的内容是一个其他字段的值. Th

  • Swoole 5将移除自动添加Event::wait()特性详解

    前言 在之前的版本中,编写Cli命令行脚本中使用异步或协程功能时,Swoole会自动在脚本末尾检测是否有Event::wait()调用,如果没有,底层会自动调用register_shutdown_function在脚本结束时调用Event::wait(),进入事件循环. 这个特性为底层带来了非常多的麻烦,我们不得不做了大量编码工作,以解决带来的问题.即便如此,仍然存在大量潜在的风险,如某些PHP版本下内存泄露,某些特殊用法导致core dump等.在最新的Swoole 5版本中,我们准备抛弃这个

  • Python自动打印被调用函数变量名及对应值 

    Python自动打印被调用函数变量名及对应值 

    目录 1.软件环境 2.问题描述 3.解决方法 4.结果预览 1.软件环境 Windows10 教育版64位Python 3.6.3 2.问题描述 我们在定义一个函数或者是调用一个函数的时候,总是希望能够知道传入该被调用函数的具体值是多少?是否符合我们的预期?因此我们往往会将我们关心的值给打印出来(当然debug也可以,但不能每次都debug吧?),如下,我们创建了一个initial_printer示例函数: def initial_printer(variable_a, variable_b,

  • Vue页面加载完成后如何自动加载自定义函数

    目录 页面加载完成后自动加载自定义函数 created mounted vue之自执行函数 页面加载完成后自动加载自定义函数 created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. methods: {             indexs:function(){                 this.$http.post('{:url("Index/fun")}')                     .then(function(res){

  • JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍

    某天写代码突然县道这个问题,顺势总结一波 JavaScript 函数和变量声明的"提前"(hoist)行为 简单的说 如果我们使用 匿名函数 var a = {} 这种方式, 编译后变量声明a 会"被提前"了,但是他的赋值(也就是a)并不会被提前. 也就是,匿名函数只有在被调用时才被初始化. 如果使用 function a () {}; 这种方式, 编译后函数声明和他的赋值都会被提前. 也就是说函数声明过程在整个程序执行之前的预处理就完成了,所以只要处于同一个作用域

  • Python中max函数用于二维列表的实例

    最近写一个和二维列表有关的算法时候发现的 当用max求二维列表中最大值时,输出的结果是子列表首元素最大的那个列表 测试如下 c=[[1,2,-1],[0,5,6]] a=[[0,3,-1],[1,4,6]] print(max(c),max(a)) 结果是这样的 [1, 2, -1] [1, 4, 6] 以上这篇Python中max函数用于二维列表的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Python中max函数用法实例分析 Py

  • 用js实现的一个根据内容自动生成表格的函数

    晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序. 要求是: 1,对于空内容,应该写为"<td> </td>",否则在ie会显示的很变态(ie当作该单元格不存在). 2,当输出数据条数不等于表格的"长X宽"时,用"<td> </td>"自动填补最后一行空余的地方. 其实也很简单,当时做asp时用了一个较复杂的算法(下面代码中MakeTable2),今天又想到一个更容易理解的算法(M

  • PHP 查找字符串常用函数介绍

    一.strstr - 查找字符串的首次出现 string strstr ( string $haystack , mixed $needle [, bool $before_needle = false ] ) 注1:$haystack是当事字符串,$needle是被查找的字符串.该函数区分大小写. 注2:返回值是从needle开始到最后. 注3:关于$needle,如果不是字符串,被当作整形来作为字符的序号来使用. 注4:before_needle若为true,则返回前东西. 复制代码 代码如

随机推荐