關於arguments.callee.caller.arguments[0]獲得event的一些問題<轉>

本文轉載自查看原文 2016-03-18 11:27 2687

本文轉載自：一縷青煙

原文鏈接：http://www.cnblogs.com/funlake/archive/2009/04/07/1431238.html

補充內容轉自：lisa85yun的博客

鏈接：http://blog.sina.com.cn/s/blog_61d7c6510100n3v7.html

先從一個簡單的例子說起，一個簡單的button控件如下:

然后為其注冊事件，這樣的情況，怎么在javascript里獲取event呢，特別是firefox的情況。請看:

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就是函數體的調用函數體

簡單例子如下:

不出意外，上面的例子將輸出3個true,表明當a()調用時，函數b與函數a的關系。

好，弄清楚了arguments.callee與caller，我們再把原先的例子改改

我們把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了.

使用2級注冊事件來測試一下，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<input type='button' name='mybtn' id='mybtn' />
<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;
}
function myFunc2( e ){
alert(e);
alert(arguments[0]);
}
function a(){
b();
}
function b(){
alert(b === arguments.callee)
alert(b.caller === a)
alert(arguments.callee.caller === a)
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var BindAsEventListener_t = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, [arguments[0] || window.event].concat(args));
}
}
addEventHandler( document.getElementByIdx_x("mybtn") , "click" , myFunc ); //1
//addEventHandler( document.getElementByIdx_x("mybtn") , "click" , myFunc2); //2
//myFunc2();
</script>
</body>
</html>

會發現，firebug會提示“arguments.callee.caller is null ” 。

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。