<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input type="button" id="button1" value="按钮1" onclick="main1()">
<input type="button" id="button2" value="按钮2">
<input type="button" id="button3" value="按钮3">
<input type="button" id="button4" value="按钮4">
<input type="button" id="button5" value="按钮5">
</div>
<script>
function main1(){
alert("hello world!");
}
//html事件处理程序
<!----DOM 0级事件处理程序----->
var x = document.getElementById("button2");//先获取出元素，定义对象，取得Button2对象
x.onclick=function main2(){
alert("通过DOM 0级事件处理程序得到");
};
//这是通过DOM0级添加的事件！让事件以对象的属性的形式出现。给x添加onclick属性
x.onclick=null;
<!----DOM 2级事件处理程序----->
var y = document.getElementById("button3");
y.addEventListener('click',main1,false);
y.addEventListener('click',function(){
alert(this.value);
},false);
y.removeEventListener('click',main1,false);
<!----IE事件处理程序----->
var z = document.getElementById("button4");
z.attachEvent('onclick',main1);
z.detachEvent('onclick',main1);
<!----跨浏览器处理程序----->
var eventUntil={
//添加语句
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;
}
}
};
eventUntil.addHandler(button5,'click',main1);
</script>
</body>
</html>
