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 解析url的search方法
Feb 09 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
用webAPI实现图片放大镜效果
Nov 23 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计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php中memcache 基本操作实例
2015/05/17 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
thinkphp分页集成实例
2017/07/24 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
js 颜色选择插件
2017/01/23 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Python运算符重载用法实例
2015/05/28 Python
Python迭代和迭代器详解
2016/11/10 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
继电保护工岗位职责
2014/01/05 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
岁月神偷观后感
2015/06/11 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP