火狐和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 (用setTimeout而非setInterval)
Dec 28 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
vue配置接口域名方法总结
May 12 Javascript
js实现全选和全不选
Jul 28 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 session有效期问题
2009/04/26 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP解析RSS的方法
2015/03/05 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
js数组操作常用方法
2014/05/08 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Numpy中的mask的使用
2018/07/21 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
电子商务毕业生求职信
2013/11/10 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
群众路线调研报告范文
2014/11/03 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
python中数组和列表的简单实例
2022/03/25 Python
MySQL创建管理HASH分区
2022/04/13 MySQL