一、事件流

    1.事件流：描述的是在页面中接受事件的顺序

    2.事件冒泡:由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）

    3.事件捕获：最不具体的节点先接收事件，而最具体的节点应该最后接收事件


二、事件处理

    1.HTML事件处理：直接添加到HTML结构中

    2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性

    3.DOM2级事件处理：

        addEventListener("事件名","事件处理函数",布尔值)

        true:事件捕获

        false:事件冒泡

        removeEventListener();

    4.IE事件处理程序

        attachEvent

        detachEvent

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<button id="btn1">按钮</button>
		</div>
		<!--<script>
			function demo(){
				alert("Hello HTML事件处理");
			}
		</script>-->
		<!--<script>
			var btn1 = document.getElementById("btn1");
			btn1.onclick = function(){alert("Hello DOM0级事件处理程序")};//被覆盖掉
			btn1.onclick = function(){alert("Hello DOM0级事件处理程序2")};
			btn1.onclick = function(){alert("Hello DOM0级事件处理程序3")};
		</script>-->
		<!--<script>
			var btn1 = document.getElementById("btn1");
			btn1.addEventListener("click",demo1);
			btn1.addEventListener("click",demo2);
			btn1.addEventListener("click",demo3);
			function demo1(){
				alert("DOM2级事件处理程序1");
			}
			function demo2(){
				alert("DOM2级事件处理程序2");
			}
			function demo3(){
				alert("DOM2级事件处理程序3");
			}
			btn1.removeEventListener("click",demo2)
		</script>-->
		<script>
			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>


三、事件对象

     1、事件对象：在触发DOM事件的时候都会产生一个对象

     2、事件对象event:

        type:获取事件类型

        target：获取事件目标

        stopPropagation():阻止事件冒泡

        preventDefault():阻止事件默认行为  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<button id="btn1">按钮</button>
			<a href="http://www.baidu.com" id="aid">百度</a>
		</div>
		<script>
			document.getElementById("btn1").addEventListener("click",showType);
			document.getElementById("div").addEventListener("click",showDiv);
			document.getElementById("aid").addEventListener("click",showA);
			function showType(event){
//				alert(event.type);
				alert(event.target);
				event.stopPropagation();//阻止事件冒泡
			}
			function showDiv(){
				alert("div")
			}
			function showA(event){
//				event.stopPropagation();
//				event.preventDefault();
			}
		</script>
	</body>
</html>