火狐和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 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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
YII中assets的使用示例
2014/07/31 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
python中可以声明变量类型吗
2020/06/18 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
总经理职责范文
2013/11/08 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
优秀团员个人总结
2015/02/26 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书