解决webkit浏览器中js方法中使用window.event提示未定义的问题
2015-12-20 20:14
796 查看
这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的形式传入(后文会详说).
然后这里解释一下webkit内核的浏览器是如何隐式传入的event对象.
还是上面那个例子,在webkit浏览器中,onclick="myfunc('testwebkit')" 这句实际上相当于这样的:
换句话说onclick方法的0号参数实际上就是那个隐式传进来的event对象.
然后我们再来看一下js方法中的一种调用:arguments.callee.caller,其中arguments为方法的参数集合,callee为当前参数所在的方法,caller就为调用此方法的方法(或者说调用者).
然后就有如下的对应关系:
这里特别说一句,arguments.callee.caller是可以继续往上追寻调用者的,比如arguments.callee.caller.arguments.callee.caller就是又向上追寻了一级.为何会特别说这个,因为有些时候会遇到自定义标签之类的情况,这种情况中如果有封装和js相关的方法,可能会存在如下这种情况:
此时如果还想在myfunc方法中获取到event对象,就需要连往上追寻2级,使用arguments.callee.caller.arguments.callee.caller.arguments[0]来获取了..
function myfunc(param){ alert(window.event); } //ie中 <input type="button" onclick="myfunc('testie')" > //一切正常 //webkit浏览器,如chrome,firefox之类的 <input type="button" onclick="myfunc('testwebkit')" > //会提示undefined
然后这里解释一下webkit内核的浏览器是如何隐式传入的event对象.
还是上面那个例子,在webkit浏览器中,onclick="myfunc('testwebkit')" 这句实际上相当于这样的:
onclick(event){ myfunc('testwebkit'); }
换句话说onclick方法的0号参数实际上就是那个隐式传进来的event对象.
然后我们再来看一下js方法中的一种调用:arguments.callee.caller,其中arguments为方法的参数集合,callee为当前参数所在的方法,caller就为调用此方法的方法(或者说调用者).
然后就有如下的对应关系:
function myfunc(param){ alert(arguments.callee); //myfunc() alert(arguments.callee.caller); //onclick() alert(arguments.callee.caller.arguments[0]); //event } //webkit浏览器,如chrome,firefox之类的 <input type="button" onclick="myfunc('testwebkit')" >
这里特别说一句,arguments.callee.caller是可以继续往上追寻调用者的,比如arguments.callee.caller.arguments.callee.caller就是又向上追寻了一级.为何会特别说这个,因为有些时候会遇到自定义标签之类的情况,这种情况中如果有封装和js相关的方法,可能会存在如下这种情况:
onclick(event){ tagCommand(){ //某些情况下的多层嵌套 myfunc('testwebkit'); } }
此时如果还想在myfunc方法中获取到event对象,就需要连往上追寻2级,使用arguments.callee.caller.arguments.callee.caller.arguments[0]来获取了..
相关文章推荐
- 关于javascript正则“反向引用”
- 笔记4——JavaScript权威指南之数组
- jsp实现文件下载方式
- JavaScript设计模式--状态模式
- 关于JavaScript中的DOM操作
- 在HTML中使用JavaScript
- JavaScript设计模式--装饰者模式
- 简单又实用的EL和JSTL
- JavaScript设计模式--中介者模式
- JavaScript设计模式--责任链模式
- JavaScript设计模式--享元模式
- leetcode (35) Search Insert Position js代码实现
- JavaScript设计模式--模板方法模式
- JavaScript简介小结
- JavaScript设计模式--观察者模式
- JavaScript设计模式--迭代器模式
- JavaScript设计模式--代理模式
- JavaScript设计模式--策略模式
- JavaScript设计模式--单例模式
- JavaScript设计模式--前奏