火狐和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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
最简单的jQuery程序 入门者学习
Jul 09 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 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制作静态网站的模板框架
2006/10/09 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
php判断目录存在的简单方法
2019/09/26 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python的Flask框架中web表单的教程
2015/04/20 Python
python实现简单的socket server实例
2015/04/29 Python
django框架如何集成celery进行开发
2017/05/24 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
营销总经理岗位职责
2014/02/02 职场文书
商业活动邀请函
2014/02/04 职场文书
关于保护环境的建议书
2014/05/13 职场文书
酒店员工辞职信范文
2015/02/28 职场文书