火狐和ie下获取javascript 获取event的方法(推荐)


Posted in Javascript onNovember 26, 2016

javascript 获取event

先从一个简单的例子说起,一个简单的button控件如下:

<input type='button' name='mybtn' id='mybtn' onclick='myFunc()'/>

然后为其注册事件,这样的情况,怎么在javascript里获取event呢,特别是firefox的情况。请看:

<script type='text/javascript'>
function myFunc(){
  var ev = window.event || arguments.callee.caller.arguments[0]
    ,et = ev.srcElement || ev.target;

  alert(et.tagName);  
}
</script>

不出意外的话,在ie/ff下,上面例子都将输出INPUT,即是触发click事件节点的标签名,ie的event获取这里就不说了,重点说说ff下的情况。

这里的arguments.callee.caller.arguments[0]看起来又长又怪,为什么在firefox的情况下,这个东西就是event呢?

首先得了解arguments.callee是什么东西,caller又是什么样的属性?

argments.callee就是函数体本身,arguments.callee.caller就是函数体的调用函数体

简单例子如下:

<script type='text/javascript'>
function a(){
   b();
}

function b(){
   alert(b === arguments.callee)
   alert(b.caller === a)
   alert(arguments.callee.caller === a)

}
a();
</script>

不出意外,上面的例子将输出3个true,表明当a()调用时,函数b与函数a的关系。

好,弄清楚了arguments.callee与caller,我们再把原先的例子改改

<script type='text/javascript'>
function myFunc(){
  alert(arguments.callee.caller.toString())
  var ev = window.event || arguments.callee.caller.arguments[0]
    ,et = ev.srcElement || ev.target;
}
</script>

我们把argument.callee.caller的函数体输出,看看到底在ie和ff下有何区别.

可以看到ie下输出为

function anonymous(){
  myFunc()
}

ff下输出为

function onclick(event){
  myFunc();
}

由此看出在html控件中直接注册事件在ie/ff下表现的不同, ie下定义了一个匿名函数,内部再执行用户定制的函数(myFunc),而ff下则有所

不同,首先ff下定义了一个与节点事件同名的函数,这里是onclick事件,所以是function onclick,然后event作为一个参数传入,内部再执行myFunc.

所以当事件触发时,在myFunc里,argument.callee.caller就是指向function onclick,当然,argument.callee.caller.arguments[0]即为event了.

以上这篇火狐和ie下获取javascript 获取event的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 #Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 #Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 #Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 #Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 #Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 #Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 #Javascript
You might like
PHP中include()与require()的区别说明
2010/03/10 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
phpinfo的知识点总结
2019/10/10 PHP
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
个人优缺点自我评价
2014/01/27 职场文书
聚美优品励志广告词
2014/03/14 职场文书
新春寄语大全
2014/04/09 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript