javascript事件处理程序

js事件处理程序有四种方式：

1.html事件处理：如

<input type="botton" id="1" onclick="alert('33')"/>

这种方式把js代码写在html里面

也可以js封装处理如：

<input type="botton" id="1" onclick="showmessage()"/><script>function showmessage(){alert("33");}</script>

2.DOM0级事件处理程序

先取出元素对象，然后给予事件属性添加，如：

<input type="botton" id="1"/><script>var thing=document.getElementById('1');//取出按钮对象thing.onclick=function()//赋予onclick属性{//函数}//删除用thing.onclick=NULL；

3.DOM2级事件处理程序

2级事件处理程序提供了两个函数：addEventlistener()和removeEventlistener();

他们都接受3个参数，处理的事件名，处理时间的函数，布尔值（捕获阶段用true，冒泡阶段用false，一般用用false）；

如：

<input type="botton" id="1"/><script>var thing=document.getElementById('1');//取出按钮对象thing.addEventlistener('click',showmessage,false)//添加事件处理程序 在第一个参数事件名要注意所有的事件名都不加‘on’；比如onclick和onmouseover都不对function showmessage(){alert("33");}{//函数}</script>//删除事件用removeEventlistener('click',showmessage,false)；而且三个参数和addEventlistener的三个参数完全相同。

this指此时引用的对象。

比如:

var thing=document.getElementById('1');//取出按钮对<pre name="code" class="javascript">thing.addEventlistener('click',function(){alert(this.value);},false)//这里this指引用的元素对象thing。事件是在哪个元素上触发的this就指哪个元素

4.ie事件处理程序：（ie和opera支持）

ie上添加事件处理程序也有两个函数：

attachEvent（）和detachEvent（）

接收两个参数，处理的事件名和处理时间的函数。不用布尔值因为ie8只支持事件冒泡(默认)

如：

。。。

thing.addEventlistener('onclick',showmessage)；//注意要加‘on’

。。。

附：跨浏览器检测支持哪种处理方式：

可以把处理程序封装在一个对象中，如下：

var eventUtil={                  //添加句柄                 addHandler:function(element,type,handler){                            if(element.addEventListener){                                       element.addEventListener(type,handler,false);                            }else if(element.attachEvent){                                     element.attachEvent('on'+type,handler);                             }else{                                     element['on'+type]=handler;                             }                                                    },                   //删除句柄                   removeHandler:                                   ''''}

检测的时候这样传参：

eventUtil.addhandler(btn3,'click',function(){});