一个简单例子:
html页面:
<input type="button" value="Button" οnclick="fun1(event)" />
JS:
function fun1(evt) {
evt ? evt :window.event;
var chall = evt.target ? evt.target :evt.srcElement;
alert(chall.tagName)
}
这种情况下需要传递一个参数event事件对象,如果不想传递event时间对象该怎么写?
首先看个例子:
<span style="white-space:pre"> </span><script type="text/javascript">
function a(){
b();
}
function b(){
alert(b == arguments.callee)
alert(b === arguments.callee)
alert(b.caller === a)
alert(b.caller == a)
alert(arguments.callee.caller === a)
alert(arguments.callee.caller == a)
}
a();
<span style="white-space:pre"> </span></script>
arguments: 在函数调用时, 会自动在该函数内部生成一个名为 arguments的隐藏对象。 该对象类似于数组, 但又不是数组。可以使用[]操作符获取函数调用时传递的实参。
/**
* 在一个函数调用另一个函数时,被调用函数会自动生成一个caller属性,指向调用它的函数对象。如果该函数当前未被调用,或并非被其他函数调用,则caller为null。
* 当函数被调用时,它的arguments.callee对象就会指向自身,也就是一个对自己的引用。
由于arguments在函数被调用时才有效,因此arguments.callee在函数未调用时是不存在的(即null.callee),且解引用它会产生异常。
*/
上面例子都输出true.
上面的为什么? 在看一个例子:
<input type="button" value="Button" οnclick="fun1()" />
JS:
<span style="white-space:pre"> </span><script type="text/javascript">
function fun1() {
alert(arguments.callee.caller.toString())
}
</script>
我试了三个浏览器,输出的是这样的(可能有些不一样):
function onclick(event)
{
fun1()
}
看一下onclick这个函数,这个函数是内部自己生成的函数,所以当你注册一个时间并调用,内部是这样处理的.及时没有显示传递event参数
所以现在获取event对象是这样的
var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
window.event:IE内核一直存在的,火狐的其他浏览器获取不到
arguments.callee.caller: 简单的说就是调用此函数的函数.
callee:可以获取到当前正在被调用的函数本身
caller:获取调用者
一般情况下我们给按钮添加事件,你会很迷糊,谁是调用者?
聪明的你看了上面的内容应该知道了吧?所以这样就可以省去参数获取event对象达到各个浏览器兼容
最后的例子:
<input type="button" value="Button" οnclick="fun1()" />
JS
<span style="white-space:pre"> </span><script type="text/javascript">
function fun1() {
var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
var chall = evt.srcElement || evt.target;
alert(chall.tagName)
}
</script>