事件处理的实现【2012/07/29】

浏览器对实现对事件处理有几种方法：

1、

<input type="button" onclick="javascript:handleEvent1(event);" value="单击1" />

//直接使用元素的事件属性

function handleEvent1(event){
　　console.log("一些事件处理程序");
}

2、

<input type="button" value="单击2" id="mybut" />

//直接给元素对象添加事件属性

function handleEvent2(event){
　　console.log("事件处理程序");
}
var obut = document.getElementByIdx_x("mybut");
obut.onclick = handleEvent2;

3、

<input type="button" value="单击3" id="mybut1" />

//使用script元素的for和event属性为脚本定义事件处理代码,仅IE支持该方法，不推荐使用
<script for="mybut1" event="onclick">
　　console.log("事件处理");
</script>

4、 使用对象的fireEvent()方法，语法格式如下：

oFired = object.fireEvent(sEvent[,oEventObject])

参数sEvent用来指定事件字符串，oEventObject定义一个对象，用于获取event对象的属性，如果执行成功返回true，否则返回false。

 

5、使用attachEvent()和detachEvent()方法，用于事件绑定和解除，但这两个方法仅适用于IE，其他浏览器则使用addEventListener()和removeEventListener()来实现。

因此，为了使浏览器兼容，一般可以使用下面的代码：

<button id="mybutton">单击</button>
<script type="text/javascript">
//跨浏览器实现事件处理
var addEventListener = function(elementId,eventType,listener){
　　try{
　　　　var element = document.getElementByIdx_x(elementId);
　　　　　　if(element.addEventListener){
　　　　　　　　element.addEventListener(eventType,listener,false);
　　　　　　}
　　　　　　else if(element.attachEvent){
　　　　　　element.attachEvent("on" + eventType,listener);
　　　　}
　　}catch(e){}
};
var removeEventListener = function(elementId,eventType,listener){
　　try{
　　　　var element = document.getElementByIdx_x(elementId);
　　　　if(element.removeEventListener){
　　　　　　element.removeEventListener(eventType,listener,false);
　　　　}
　　　　else if(element.detachEvent){
　　　　　　element.detachEvent("on" + eventType,listener);
　　　　}
　　}catch(e){}
};
function handleEvent0(event){
　　console.log("一些事件处理程序！");
　　removeEventListener("mybutton","click",handleEvent0);
}
var oBut = document.getElementByIdx_x("mybutton");
addEventListener("mybutton","click",handleEvent0);
</script>