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>