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


Posted in Javascript onAugust 05, 2010

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() 方法来统一处理 事件问题。
Javascript 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
Js获取事件对象代码
Aug 05 #Javascript
zeroclipboard复制到剪切板的flash
Aug 04 #Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 #Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 #Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 #Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 #Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 #Javascript
You might like
将php数组输出html表格的方法
2014/02/24 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
基于python实现简单日历
2018/07/28 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python如何写try语句
2020/07/14 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
linux比较文件内容的命令是什么
2015/09/23 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
民间借贷协议书范本
2014/10/01 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python