事件处理函数的注册，event参数的传递

下面列出的是三种常用的方式

1、在元素标签中给事件属性赋值（所有浏览器都支持）

测试1：

html代码：

<button οnclick='test(1,event,2)'>test</button>

js代码：

function test(){

for(var i=0;i<arguments.length;i++){

document.write(arguments[i]+'<br/>');

}

}

结果：

1

[object MouseEvent]

2

测试2：

html代码：

<button οnclick='test()'>test</button>

js代码：

function test(arg1,arg2,…,argN){

for(var i=0;i<arguments.length;i++){

document.write(arguments[i]+'<br/>');

}

}

结果：

什么也不输出

结论：

<button οnclick='test(here)'>test</button>

1. here处有几个参数，就传进几个参数，不受test函数的形参个数影响
2. event参数用“event”关键字传递
3. 如果什么参数也不传，IE浏览器可以通过window.event获得事件对象，其他浏览器暂时不知道怎么获得

2、用js给元素对象添加事件属性（所有浏览器都支持）

测试1：

html代码：

<button id='btn1'>test</button>

js代码：

document.getElementById('btn1').οnclick=test;

function test(){

for(var i=0;i<arguments.length;i++){

document.write(arguments[i]+'<br/>');

}

}

结果：

FF:[object MouseEvent]

IE:arguments.length=0

结论：

IE要获得事件对象，需用window.event，其他浏览器会默认传入一个事件对象

3.使用addEventListener()和removeEventListener()方法

使用这种方法可以为一个对象注册多个事件处理函数。另外，IE使用对应的attachEvent()和detachEvent()方法

都会为事件处理函数传入一个事件对象，如果想为事件处理函数传入多个参数，可以这样写：

 

            document.getElementById("btn_2").addEventListener("click",function(){test2(arguments[0],1,2)},false);
            document.getElementById("btn_2").attachEvent("onclick",function(){test2(arguments[0],1,2)});//IE

 

 

 

 

参考资料：

 [1]张亚飞，《JavaScript权威指南》

 

转载于:https://www.cnblogs.com/acaciasun/archive/2013/06/02/3113948.html