事件处理程序

<input type="button" value="按钮1" id="btn1" onclick="myalert()"/><input type="button" value="按钮2" id="btn2"/><input type="button" value="按钮3" id="btn3"/>

HTML事件处理程序

<input type="button" value="按钮1" id="btn1" onclick="myalert()"/>

function myalert () {alert('按钮1');}

 

DOM0级事件处理程序

<input type="button" value="按钮2" id="btn2"/>

</pre><pre name="code" class="html">var btn2=document.getElementById('btn2');btn2.onclick=function(){alert('通过DOM0级事件c处理程序调用函数');}btn2.onclick=null;      //删除

 

DOM2级事件处理程序   -------不支持IE

增加：addEventListener();

删除：removeEventListener()；

三个参数：要处理的事件名；作为事件处理程序的函数；false/true

<input type="button" value="按钮3" id="btn3"/>

var btn3=document.getElementById('btn3');btn3.addEventListener('click',myalert,false);btn3.addEventListener('click',function(){alert(this.value);},false);btn3.removeEventListener('click',myalert,false);

//addEventListener()只能用removeEventListener进行删除，而且参数必须相同

 

 

IE事件处理程序

attachEvent();

detachEvent();

两个相同的参数：要处理的事件名；作为事件处理程序的函数；

<input type="button" value="按钮3" id="btn3"/>

var btn3=document.getElementById('btn3');btn3.attachEvent('onclick',myalert);btn3.detachEvent('onclick',myalert);

 

跨浏览器事件处理程序

<input type="button" value="按钮3" id="btn3"/>

var btn3=document.getElementById('btn3');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:function (element,type,handler) {if(element.removeEventListener){element.removeEventListener(type,handler,false);}else if(element.detachEvent){element.detachEvent('on'+type,handler);}else{element['on'+type]=null;}}}eventUtil.addHandler(btn3,'click',myalert);eventUtil.removeHandler(btn3,'click',myalert);