火狐和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 相关文章推荐
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
jquery使用经验小结
May 20 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
js实现无缝轮播图效果
Mar 09 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中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python实现Event回调机制的方法
2019/02/13 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python内打印变量之%和f的实例
2020/02/19 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
思想政治自我鉴定
2013/10/06 职场文书
三年大学自我鉴定
2014/01/16 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
小学总务工作总结
2015/08/13 职场文书
python文件目录操作之os模块
2021/05/08 Python