javascript事件处理程序

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

1.html事件处理：如

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

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

也可以js封装处理如：

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

2.DOM0级事件处理程序

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

<input type="botton" id="1"/>
<script>
var thing=document.getElementById('1');//取出按钮对象
thing.οnclick=function()//赋予onclick属性
{//函数
}
//删除用thing.οnclick=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(){});