火狐和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 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
RequireJs的使用详解
Feb 19 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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函数的实现原理及性能分析(一)
2015/05/13 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
基于canvas实现手写签名(vue)
2020/05/21 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Python变量访问权限控制详解
2019/06/29 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
介绍一下#error预处理
2015/09/25 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
好的演讲稿开场白
2013/12/30 职场文书
开学典礼感言
2014/02/16 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
交通安全教育心得体会
2016/01/15 职场文书
素质教育学习心得体会
2016/01/19 职场文书
Python 匹配文本并在其上一行追加文本
2022/05/11 Python
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技