火狐和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 面试题随笔
Mar 31 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JS判断字符串包含的方法
May 05 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
VSCode搭建React Native环境
May 07 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP文件操作详解
2016/12/30 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
菜单效果
2006/10/14 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
node.js实现的装饰者模式示例
2017/09/06 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python类中self参数用法详解
2020/02/13 Python
关于Keras Dense层整理
2020/05/21 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
物业电工岗位职责
2013/11/20 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
硕士学位论文评语
2014/12/31 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL