火狐和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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
javascript实现回到顶部特效
May 06 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
详解JavaScript修改注册表的方法
Jan 05 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
菜鸟修复电子管记
2021/03/02 无线电
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python中logging模块的用法实例
2014/09/29 Python
python数组过滤实现方法
2015/07/27 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
父亲生日宴会答谢词
2014/01/10 职场文书
医生进修自我鉴定
2014/01/19 职场文书
小学数学国培感言
2014/03/10 职场文书
幼儿老师求职信
2014/06/30 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
Python实现天气查询软件
2021/06/07 Python