火狐和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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
vue使用require.context实现动态注册路由
Dec 25 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
PHP XML操作类DOMDocument
2009/12/16 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
Node.js实现文件上传
2016/07/05 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
Django中FilePathField字段的用法
2020/05/21 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
教师自荐信
2013/12/10 职场文书
英语自我评价范文
2014/01/24 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
刊首寄语大全
2014/04/11 职场文书
社区禁毒工作方案
2014/06/02 职场文书
幼儿园运动会口号
2014/06/07 职场文书
法语专业求职信
2014/07/20 职场文书
大学生英文求职信范文
2015/03/19 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python