对于JS事件处理分为四部分：
1.html事件处理程序
直接添加到HTML结构中
解析：用html处理程序可以直接在button元素里直接调用，但是维护性不是很方便
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<p id="pid">js事件处理程序</p>
<button id="btn" onclick="demo()">点击</button>
<script>
function demo(){
document.getElementById("pid").innerHTML ="html事件处理程序"
}
</script> </body>
</html>
2.DOM 0级处理事件
把一个函数赋值给一个事件处理程序属性
解析：
1.调用ID属性获得事件元素，然后把事件处理程序赋值给——元素点式事件来调用
2.当再次用同样的事件的话，前面调用的处理程序将会被覆盖
3.利用元素.事件 = null ，可以清除事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <button id="btn">点击</button>
<script>
var btn = document.getElementById("btn") //调用ID属性获得button元素
btn.onclick =function(){ //点击事件1
alert("DOM 0级处理事件1")
}
btn.onclick = function(){ //点击事件2
alert("DOM 0级处理事件2")
}
btn.onclick = null //清除事件 </script> </body>
</html>
DOM2级事件处理程序
DOM2级事件处理程序
解析：
DOM2级一个元素用相同的两个事件调用不同方法时不会被覆盖
addEvenListener("事件"，“事件处理方法”)
e.target.type//获取事件目标的事件类型，返回值事件类型
e.target.stopPropagation();//阻止事件的冒泡方法
e.preventDefault()//清除元素的默认方法
elem.removeEvenlistener("事件","事件处理方法") //清除事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100px;
height:100px;
border: 1px solid gray;
}
#div2{
width: 50px;
height:50px;
border:1px solid gray;
}
</style>
</head>
<body> <div id="div1">
<div id="div2">DOM2级处理事件</div>
</div>
<a id="aid" href="www.baidu.com">连接百度</a>
<script>
var div1 = document.getElementById('div1')
var div2 = document.getElementById("div2")
var a =document.getElementById("aid")
div1.addEventListener("click",div1Style)
div2.addEventListener("click",div2Style)
div2.addEventListener("click",div3Style)
a.addEventListener("click",aStyle) function div1Style() {
this.style.background = "blue"
}
function div2Style(e) {
alert(e.type) //获取无素的事件类型
alert(e.target.id) //获取事件目标（元素）的ID
e.stopPropagation() //阻止父元素的事件冒泡
this.style.background = "black"
}
function div3Style(){
this.style.color = "red"
}
function aStyle(e){
e.preventDefault()//清除元素的默认方法
}
div2.removeEventListener("click",div3Style)//清除事件 </script>
</body>
</html>
4.针对IE8和IE8以下的游览器 attchEvent detachEvent
当IE游览是IE8或者低于IE8时 使用attchEvent2级的DOM处理事件
detachEvent来清除处理事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点击</button>
<script>
var btn = document.getElementById("btn")
if(btn.addEventListener){
btn.addEventListener("click",demo)
}else if(btn.attachEvent){ //针对IE8 和 IE8以下的游览
btn.attachEvent("onclick",demo)
}else{ //针对更老版本的游览器
btn.onclick = demo()
}
function demo(){
alert("hello")
}
btn.detachEvent("onclick",demo) //针对IE8 和 IE8以下的游览 清除事件
</script>
</body>
</html>