javascript事件绑定

 

事件对象的获取

 ie中的事件对象是以全局对象window.event存在的.

 ff中的事件对上是以句柄（handler）的第一参数传入的。

所以兼容二者需要这样写。

 var e = window.event || arguments[0];

事件获取的3种方式：

一.第一种直接在html属性上添加js事件

　添加事件的方式1.1

<div onclick=“alert(1)”>ALERT</div>

   这是很早以前的事件绑定方式，在ie，ff，chrome，operea中都测试成功

 

添加事件方式1.2

<div onclick="alert(window.event.type)">event</div>

　　

  在ie，chrome，ff中测试中通过，在ff中测试报undefined，说明ff不支持ie的世界对象的获取方式，而是通过句柄的第一个参数传入。

 

添加事件方式1.2

<div onclick="alert(event.type)">event</div>

　　在ie,chrome,opera下测试和上面的没有什么变化，但在ff下测试却不会报undefined，而是click。说明ff和ie，chrome，opera在获取事件对象的是可以这样兼容的写法的，下面我仔细分析一下 

firefox

这个在chrome，opera，ff 下测试都是click,但在ie下会报undefined。说明chrome,opera不仅支持w3c获取事件对象的方式，而且还支持ie获取事件对象的方式。

既然onclick对应的是一个匿名函数，我们就打印这个匿名函数看看

<div onclick="alert(arguments.callee)">event</div>

　　

firefox

结果

ie7

function onclick(){alert(arguments.callee);}

chrome

function onclick(event){alert(arguments.callee);}

ff

function onclick(event){alert(arguments.callee);}

opera

function onclick(event){alert(arguments.callee);}

 

可以发现ie7下没有定义参数

chrome,ff,opera定义了一个event参数

 

我接着分析

 

这两个的区别就在window.event.type和 event.type.在ff下一个弹undefined,一个弹click.这是因为ff没有window.event对象，所以前者弹undefined。后者是因为匿名函数中定义的event参数，所以ff在后者会弹click。并且在ie中，全局对象event和参数刚好同名，所以在ie中，匿名函数中直接调用全局对象window.event.所以误以为ff也支持了ie的事件对象的调用方式。

 

二.第二种上添加js事件

function test(){

}

click

先定义函数，然后赋值给onclick属性。

demo1.

function test(){

alert(window.event);

}

click

点击除了ff其他都可以获取事件对象。前面已经说过了chrome，opera都支持ie获取事件对象的方式。只有ff不支持。

demo2

function test(){

alert(event);

}

click

这种方式还是和上面的结果一样，只有ff获取不了事件对象

demo3

上面说了onclick="test()" 这是可以看做一种匿名函数的写法。那再打印看看匿名函数是怎么搞的

function test(){

alert(arguments.callee.caller);

}

click

 

结果

ie7

function onclick(){test();}

chrome

function onclick(event){test();}

ff

function onclick(event){test();}

opera

function onclick(event){test();}

 

回到test()这个上面，在ff中匿名函数的event是已经传入了的，那么在test()闭包中按道理是可以获取event对象的。但事实上ff却报错了，那应该是匿名函数的闭包环境和test()的闭包环境不一样，所以必须通过显示传入event参数。按下面这样就可以了

 

下面这种写法是兼容性比较好的写法

<div onclick="test(event)"></div>

function test(event){

alert(event);

  }

 

还有这种写法。个人觉得可以很好的理解者其中的传参关系，兼容性可能会更好，不过这种写法很另类

<div onclick="test(arguments)"></div>

function test(a){

var e = window.event || a[0];

alert(e);

  } 

三.第三种上添加js事件

添加事件的方式1.1

var tt = document.getElementById("tt");

function clk(a){

alert(1);

}

tt.onclick = function(e){

var e = e || window.event;

alert(e);

}

四.第四种上添加js事件

添加事件的方式1.1

<div id="tt">alert</div>

　　

var tt = document.getElementById_x_x_x("tt");

function clk(a){

alert(1);

}

if(tt.addEventListener){

tt.addEventListener('click',clk,false);

}

if(tt.attachEvent){

tt.attachEvent('onclick',clk);

}

五.兼容事件绑定的写法（待续）