<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>DOM事件</title>
 <style>
  #btn2{
   font-size:25px;
   background-color:blue;
  }
  #btn3{
   font-size:25px;
   background-color:red;
  }
  #btn{
   font-size:25px;
   background-color:yellow;
  }
 </style>
</head>
<body>
<div id="box">
 <input type="button" value="按钮1" id="btn" onclick="showMes()">
 <input type="button" value="按钮2" id="btn2">
 <input type="button" value="按钮3" id="btn3">
</div>
<script>
function showMes(){
 alert("通过HTML添加事件");
}
 var btn=document.getElementById('btn');
 var btn2=document.getElementById('btn2');
 var btn3=document.getElementById('btn3');
 
btn2.onclick=function(){     //DOM0级
 alert("通过DOM0级添加事件");
}
btn2.onclick=null;
btn3.addEventListener('click',showMes,false);//DOM2级
btn3.addEventListener('click',function(){
alert(this.value);},false)
//btn3.removeEventListener('click'showMes,false);
</script>
</body>
</html>
FSYu
相关分类