让Firefox支持event对象实现代码
2023-06-13 09:14:14 时间
通常为了兼容IE与FireFox,一般的事件处理方法为:
复制代码代码如下:
btn.onclick=handle_btn_click;
functionhandle_btn_click(evt){
if(evt==null)evt=window.event;//IE
//处理事件.
}
对于简单的程序,这不算麻烦.
但对于一些复杂的程序,某写函数根本就不是直接与事件挂钩的.如果要把event传进该参数,那么所有的方法都要把event传来传去..这简直就是噩梦.
下面介绍一个解决这个麻烦事的方法,与原理.
JScript中，函数的调用是有一个func.caller这个属性的.
例如
functionA()
{
B();
}
functionB()
{
alert(B.caller);
}
如果B被A调用,那么B.caller就是A
另外,函数有一个arguments属性.这个属性可以遍历函数当前执行的参数:
functionmyalert()
{
vararr=[];
for(vari=0;i<myalert.arguments.length;i++)
arr[i]=myalert.arguments[i];
alert(arr.join("-"));
}
myalert("hello","world",1,2,3)
就能显示hello-world-1-2-3
(arguments的个数与调用方有关,而与函数的参数定义没有任何关系)
根据这两个属性,我们可以得到第一个函数的event对象:
btn.onclick=handle_click;
functionhandle_click()
{
showcontent();
}
functionshowcontent()
{
varevt=SearchEvent();
if(evt&&evt.shiftKey)//如果是基于事件的调用,并且shift被按下
window.open(global_helpurl);
else
location.href=global_helpurl;
}
functionSearchEvent()
{
func=SearchEvent.caller;
while(func!=null)
{
vararg0=func.arguments[0];
if(arg0)
{
if(arg0.constructor==Event)//如果就是event对象
returnarg0;
}
func=func.caller;
}
returnnull;
}
这个例子使用了SearchEvent来搜索event对象.其中"Event"是FireFox的event.constructor.
在该例子运行时,
SearchEvent.caller就是showcontent,但是showcontent.arguments[0]是空.所以func=func.caller时,func变为handle_click.
handle_click被FireFox调用,虽然没有定义参数,但是被调用时,第一个参数就是event,所以handle_click.arguments[0]就是event!
针对上面的知识,我们可以结合prototype.__defineGetter__来实现window.event在FireFox下的实现:
下面给出一个简单的代码..有兴趣的可以补充(本人已经有修改)
<scriptlanguage="javascript">
functionhandle_click(){
if(window.addEventListener)
{
FixPrototypeForGecko();
alert(window.event.srcElement)
}
}
functionFixPrototypeForGecko()
{
HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);
window.constructor.prototype.__defineGetter__("event",window_prototype_get_event);
Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement);
}
functionelement_prototype_get_runtimeStyle()
{
//returnstyleinstead...
returnthis.style;
}
functionwindow_prototype_get_event()
{
returnSearchEvent();
}
functionevent_prototype_get_srcElement()
{
returnthis.target;
}
functionSearchEvent()
{
//IE
if(document.all)
returnwindow.event;
func=SearchEvent.caller;
while(func!=null)
{
vararg0=func.arguments[0];
if(arg0)
{
//if(arg0.constructor==Event)
if(arg0.constructor==Event||arg0.constructor==MouseEvent||(typeof(arg0)=="object"&&arg0.preventDefault&&arg0.stopPropagation))
returnarg0;
}
func=func.caller;
}
returnnull;
}
</script>
<divid="mydiv"onclick="handle_click();">clickhere!!</div>
javascript和JScript也是不相同的,前者是客户端的脚本,后者是服务端的脚本和VBScript一样被服务端所支持
当然我这里不是要说两者的区别,只是让自己了解到自己现在的水平(不是一般的差)...
如果就只给出了上面的代码,相信刚开始要搞兼容性的朋友一定很难看理解这些代码的用处
这里我就一一的解释下上面这些代码的用法吧
先看下__defineGetter__和__defineSetter__这两个方法的解释吧:
一.Getter是一种获取一个属性的值的方法，Setter是一种设置一个属性的值的方法。可以为任何预定义的核心对象或用户自定义对象定getter和setter方法，从而为现有的对象添加新的属性。
二.可以在什么时候对对象和事件添加新的属性?
1.在对象初始化时定义
2.在对象定义后通过Object的__defineGetter__、__defineSetter__方法来追加定义
详细的用法可以在请看这里对__defineGetter__、__defineSetter__的解释(地址:http://anbutu.javaeye.com/blog/post/194276)
所以我们看到了,在FixPrototypeForGecko()函数里分别给三个对象添加了属性,当然是在FF下对对象的添加:
HTMLElement添加了"runtimeStyle"属性,属性值为element_prototype_get_runtimeStyle函数的返回的值
window添加了"event"属性,属性值为window_prototype_get_event返回的值
Event添加了"srcElement"属性,基属性值为event_prototype_get_srcElement函数所返回的值
这样我们就为这三个对象在FF下扩展了新的属性
所以我们在判断浏览器是否为FF后执行FixPrototypeForGecko()过程,这个时候在FF下这三个对象的就有了新的属性
于是当我们点击DIV标签后在弹出的窗口中我们看到了"[objectHTMLDivElement]"字样,也说明我们已经成功的为window对象添加了event属性
if(window.addEventListener){
FixPrototypeForGecko();
alert(window.event.srcElement)
}
大家可以看到element_prototype_get_runtimeStyle过程和event_prototype_get_srcElement过程所以返回的值都能很容易理解
那下面我们来看看window_prototype_get_event()过程是怎么样返回事件的
过程的返回值是SearchEvent()过程的结果,看下这个过程
functionSearchEvent()
{
//IE
if(document.all)
returnwindow.event;
func=SearchEvent.caller;
while(func!=null)
{
vararg0=func.arguments[0];
if(arg0)
{
//if(arg0.constructor==Event||arg0.constructor==MouseEvent)
if(arg0.constructor==Event||arg0.constructor==MouseEvent||(typeof(arg0)=="object"&&arg0.preventDefault&&arg0.stopPropagation))
returnarg0;
}
func=func.caller;
}
returnnull;
}
要明白这个过程就得先明白两个方法:caller和arguments(在文章上面有相应的解释)
在这里再解释下constructor构造者这个属性,返回的是对象的相应对象的创建者
在while循环里alert(func)我们就可以看到func.caller的返回了,最后一次返回的就是我们的鼠标点击事件了
因为handle_click()过程是我们在点击div后执行的,所以最后的func.caller就是我们的点击事件了,这个时候的funcj就是handle_click(),那么也就相当于是handle_click.caller,当然handle_click的调用者当然就是onclick事件了,也就是[MouseEvent]
可以看到我在if(arg0.constructor==Event||arg0.constructor==MouseEvent)增加了一个条件,是因为arg0.constructor现在的结果就是MouseEvent
看到这里相信大家也知道在FF下怎样编写event了
最后再说下"addEventListener"为对象注册事件方法
<script>
functionaddObjectEvent(objId,eventName,eventFunc)
{
vartargetObj=document.getElementById(objId);
if(targetObj)
{
if(targetObj.attachEvent)
{
targetObj.attachEvent(eventName,eventFunc);
}
elseif(targetObj.addEventListener)
{
eventName=eventName.toString().replace(/on(.*)/i,"$1");
targetObj.addEventListener(eventName,eventFunc,true);
}
}
}
functiontest1()
{
alert("test1");
}
functiontest2()
{
alert("test2");
}
</script>
<divid="hi"onclick="MyTest();">onclick</div>
<script>
addObjectEvent("hi","onclick",test1);
addObjectEvent("hi","onclick",test2);//先执行test2(队列)
</script>
相关文章
- Python表白代码：太秀了，用过的人都找到了对象…【满屏玫瑰盛开】
- springMVC接受对象集合，name数组
- 实战：第十九章：存入Long类型对象，在代码中使用Long类型接收，结果报类型转换错误
- 【UML 建模】UML建模语言入门 -- 静态图详解 类图 对象图 包图 静态图建模实战
- 【Groovy】MOP 元对象协议与元编程 ( 使用 Groovy 元编程进行函数拦截 | 通过 MetaClass#invokeMethod 方法调用类其它方法 )
- 【Groovy】MOP 元对象协议与元编程 ( 方法委托 | 正常方法调用 | 方法委托实现 | 代码示例 )
- 分享redis如何实现保存对象相关知识
- Hibernate createQuery方法：创建Query对象
- Redis实现高效存储与获取对象（用redis存取对象）
- XML到Java代码的数据绑定之对象
- Asp遍历服务器对象的代码
- 写的一段拖动对象的代码
- JS查看对象功能代码
- JavaScript常见对象类创建代码与优缺点分析
- Json对象替换字符串占位符实现代码
- asp.net中实体类对象赋值到表单的实现代码
- javascript,php获取函数参数对象的代码
- Ajax创建XMLHttp对象的完美兼容性代码
- 判断对象是否Window的实现代码
- 从URL中提取参数与将对象转换为URL查询参数的实现代码
- 一行代码实现纯数据json对象的深度克隆实现思路
- javascript当中的代码嗅探扩展原生对象和原型(prototype)
- Javascript判断对象是否相等实现代码
- JS动态添加与删除select中的Option对象(示例代码)
- JS对象转换为Jquery对象实现代码
- 遍历DOM对象内的元素属性示例代码
- javascript获取函数名称、函数参数、对象属性名称的代码实例