火狐和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 相关文章推荐
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 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类Class的概念
2012/06/14 PHP
php的dl函数用法实例
2014/11/06 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
javascript 一些用法小结
2009/09/11 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
js操作二进制数据方法
2018/03/03 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
python实现类之间的方法互相调用
2018/04/29 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
python字符串判断密码强弱
2020/03/18 Python
python实现批量修改文件名
2020/03/23 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
python各种excel写入方式的速度对比
2020/11/10 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
支教自我鉴定
2014/01/18 职场文书
见习期自我鉴定
2014/01/31 职场文书
读群众路线的心得体会
2014/09/03 职场文书
荆州古城导游词
2015/02/06 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android