火狐和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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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一个文件搞定微信jssdk配置
2016/12/12 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
Python中的元类编程入门指引
2015/04/15 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python在文本开头插入一行的实例
2018/05/02 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python list格式数据excel导出方法
2018/10/31 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
python根据文本生成词云图代码实例
2019/11/15 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
python爬虫 requests-html的使用
2020/11/30 Python
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
鼓舞士气的口号
2014/06/16 职场文书
节能减耗标语
2014/06/21 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
思想政治表现评语
2015/01/04 职场文书
毕业生评语大全
2015/01/04 职场文书
承诺函格式模板
2015/01/21 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python