//转载处 http://www.cnblogs.com/funlake/archive/2009/04/07/1431238.html 非常详细

先从一个简单的例子说起,一个简单的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,我们再把原先的例子改改

Code

我们把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里,arguments.callee.caller就是指向function onclick,当然,arguments.callee.caller.arguments[0]即为event了.

arguments.callee  被调用对象 function myFunc(){......}

arguments.callee.caller 调用的对象     function onclick(event){}

arguments.callee.caller.arguments[0] 即为 event

javascript 获取event对象的更多相关文章

  1. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  2. 火狐和ie下获取javascript 获取event

    javascript 获取event 先从一个简单的例子说起,一个简单的button控件如下: <input type='button' name='mybtn' id='mybtn' oncl ...

  3. javascript获取json对象的key名称的两种方法

    javascript获取json对象的key名称的两种方法 数据处理中,你可能接收到一个不确定内容格式的json对象,然后要把key的值提取出来.今天试过两种可以提取json key的方法,均可以正常 ...

  4. JavaScript的event对象

    JavaScript的event对象中 event.target指代的是:触发事件的元素 event.currentTarget指代的是:事件绑定的元素 <!DOCTYPE html> & ...

  5. JavaScript获取事件对象和目标对象

    在JavaScript开发中,经常需要获取触发某个事件的目标对象.让后根据目标对象进行不同的业务处理.下面展示通过JavaScript获取触发事件的事件目标对象.如下: Js代码 1 2 3 4 5 ...

  6. javascript获取事件源对象和产生事件的对象

    事件源对象是指event对象,其封装了与事件相关的详细信息,比如按键状态. 获取事件源对象的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  7. 【JAVASCRIPT】event对象

    一.preventDefault  与 stopPropagation event.preventDefault() 和 event.stopPropagation() 不是JQuery的方法,是JS ...

  8. JavaScript 获取 flash 对象

    关于js获取flash对象,网上有非常多的例子,我也尝试了不少方法. 虽然都能用,但是没有我最想要的东西, 后来看了下百度的,虽然很规范,各种情况都考虑到了,但是代码量却不是不容乐观, 前前后后将近2 ...

  9. 【好文收藏】javascript中event对象详解

    event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEleme ...

随机推荐

  1. document.write 向文档中写内容,包括文本、脚本、元素之类的,但是它在什么时候执行不会覆盖当前页面内容尼?

    当你打开一个页面,浏览器会 调用 document.open() 打开文档 document.write(...) 将下载到的网页内容写入文档 所有内容写完了,就调用 document.close() ...

  2. (转)sql语句中charindex的用法

    假如你写过很多程序,你可能偶尔会碰到要确定字符或字符窜串否包含在一段文字中,在这篇文章中,我将讨论使用CHARINDEX和PATINDEX函数来搜索文字列和字符串.我将告诉你这两个函数是如何运转的,解 ...

  3. Ubuntu + hadoop2.6.0下安装Hive

    第一步:准备hive和mysql安装包 下载hive 1.1.1 地址:http://www.eu.apache.org/dist/hive/ 下载Mysql JDBC 5.1.38驱动:http:/ ...

  4. 13 java 设计模式--单例模式

    /** * 单例 */ public class JobSchedulerService { //防止类外部通过new实例化该类 private JobSchedulerService() { } / ...

  5. c#中将默认常量(32bit)转换为8bit

    // //将int进制转换 // private byte hex(int myHex) { byte[] a = BitConverter.GetBytes(myHex); return a[0]; ...

  6. DataTables在回调方法中使用api

    $(document).ready(function() { $('#example').dataTable( { "initComplete": function () { va ...

  7. AngularJS中的控制器示例

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  8. jquery中ajax的dataType属性包括哪几项

    参考ajax api文档:http://www.w3school.com.cn/jquery/ajax_ajax.asp dataType类型:String预期服务器返回的数据类型.如果不指定,jQu ...

  9. 什么是dtd文件,为什么需要dtd

    DTD为英文Document Type Definition,中文意思为"文档类定义".DTD肩负着两重任务:一方面它帮助你编写合法的代码,另一方面它让浏览器正确地显示器代码.也许 ...

  10. XML Schema <第三篇>

    验证XML文档是否符合议定的XML结构有两种方法,分别是DTD模式与XML Schema.本文主要介绍XML Schema. 一.XML Schema的优点 XML Schema基于XML,没有专门的 ...