JavaScript事件
1、JavaScript事件流
（1）事件冒泡：具体到不具体（即button到DOCTYPE）。
（2）事件捕获：不具体到具体（即DOCTYPE到button）。
2、JavaScript事件处理
（1）HTML事件处理：
直接添加到HTML结构中。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>HTML事件处理</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
</div>
<script type="text/javascript">
function demo () {
// body...
alert("Hello HTML事件处理");
}
</script>
</body>
</html>
（2）DOM0级事件处理：
把一个函数赋值给一个事件程序属性。
缺点：多个事件会被覆盖掉，就近原则。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>HTML事件处理</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
</div>
<script type="text/javascript">
var btn1=document.getElementById("btn1");
btn1.onclick=function (){alert("Hello DOM0级事件处理");}
// btn1.onclick=null;//清除事件处理
</script>
</body>
</html>
（3）DOM2级事件处理：（IE则IE9版本之上）
优点：事件不会被覆盖
addEventListener（“事件名”，“事件处理函数”，“布尔值”）；
true：事件捕获
false：事件冒泡
removeEventListener（）；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>HTML事件处理</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
</div>
<script type="text/javascript">
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
function demo1(){
alert("DOM2级事件处理01");
}
function demo2(){
alert("DOM2级事件处理02");
}
//btn1.removeEventListener("click",demo2);//移除事件
</script>
</body>
</html>
（4）IE事件处理程序：（IE9版本之上）
attachEvent
detachEvent
（5）事件适应浏览器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>HTML事件处理</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
</div>
<script type="text/javascript">
var btn1=document.getElementById("btn1");
if (btn1.addEventListener) {
btn1.addEventListener("click",demo);
}else if(btn1.attachEvent){
btn1.attachEvent("onclick",demo);
}else{
btn1.onclick=demo();
}
function demo(){
alert("Hello!");
}
</script>
</body>
</html>
(6)JavaScript事件对象：
在触发DOM事件的时候都会产生一个对象。
事件对象event：
①type：事件类型。
②target：事件目标。
③stopPropagation()：阻止事件冒泡。
④preventDefault()：阻止事件默认行为。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>HTML事件处理</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
<a href="http://www.baidu.com">百度</a>
</div>
<script type="text/javascript">
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",show);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType (event) {
// body...
//alert(event.type);
//alert(event.target);
event.stopPropagation();//阻止事件冒泡
}
function showDiv(){
alert("div");
}
function showA(event){
event.stopPropagation();
event.preventDefault();//阻止默认事件行为
}
</script>
</body>
</html>
