火狐和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 相关文章推荐
Javascript String.replace的妙用
Sep 08 Javascript
html中table数据排序的js代码
Aug 09 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
js canvas实现5张图片合成一张图片
Jul 15 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
php检测文本的编码
2015/07/26 PHP
Joomla开启SEF的方法
2016/05/04 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python验证码截取识别代码实例
2020/05/16 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
智能钱包:Ekster
2019/11/21 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
烹调加工管理制度
2014/02/04 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
拆迁委托协议书
2014/09/15 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
谢师宴邀请函
2015/02/02 职场文书