火狐和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中的几个运算符
Jun 29 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
使用JS实现简易计算器
Jun 14 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数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
iOS10推送通知开发教程
2016/09/19 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
javascript几个易错点记录
2014/11/26 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
python实现将内容分行输出
2015/11/05 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python查看模块,对象的函数方法
2018/10/16 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python3 logging日志封装实例
2020/04/08 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
C语言笔试题
2014/09/04 面试题
婚礼女方父母答谢词
2015/01/04 职场文书
家长给老师的感谢信
2015/01/20 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
转变工作作风心得体会
2016/01/23 职场文书