event 事件
浏览器自动触发或者用户手动触发的页面状态的改变
事件处理函数：当事件发生时自动调用的函数
事件发生之前就需要绑定到事件属性上
绑定事件的三种方式：
1、在html中绑定
<a onclick = "alert('hello world')"></a>
2、在js中动态绑定，为事件属性赋值一个函数
document.getElementById("xxx").onclick = fun;
function fun(){
alert("hello world");
}
3、使用addEventListener添加
function fun1() {
console.log("abc1");
}
function fun2() {
console.log("abc2");
}
Element.addEventListener("click", fun1);
Element.addEventListener("click", fun2);
删除事件
Element.removeEventListener("click", fun2);
注意：添加时，第二个参数可以写匿名函数，若该事件明确未来可能删除，则不可以写匿名函数，否则无函数名无法删除。
事件模型
一个事件发生，有三个阶段
1、捕获
由外到内，记录各级父元素上绑定的相同的事件
2、目标出发
首先触发目标元素上的事件处理函数
3、冒泡
按照捕获的顺序，反向执行，由内到外，依次触发各级父元素绑定的事件的处理函数
html部分：
<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body>
css部分：
<style>
.div1 {
width: 500px;
height: 500px;
background-color: #f00;
}
.div2 {
width: 400px;
height: 400px;
background-color: #0f0;
position: absolute;
top: 50px;
left: 50px;
}
.div3 {
width: 300px;
height: 300px;
background-color: #00f;
position: absolute;
top: 50px;
left: 50px;
}
</style>
js部分：
var div1 = document.getElementsByClassName("div1")[0];
var div2 = document.getElementsByClassName("div2")[0];
var div3 = document.getElementsByClassName("div3")[0];
div1.addEventListener("click", fun);
div2.addEventListener("click", fun);
div3.addEventListener("click", fun);
function fun(e) {
console.log(this.className);
}
点击蓝色区域，输出结果如图：
addEventListener的第三个参数：capture
是否在捕获阶段，提前出发
true或者false，默认为false
将上面的代码中的js部分中修改一行
div2.addEventListener("click", fun, true);
点击蓝色区域，输出结果如图：
不难发现，给div2绑定事件时，加入了第三个参数，true，div2的事件可以提前触发。
事件对象
当事件发生时，自动创建的封装所有事件信息的一个对象
获取：
DOM标准： 事件对象默认作为事件处理函数的第一个参数传入
function fun(e){
e;//事件发生时，自动获得事件对象
}
IE8：在全局window，定义了一个event
function fun(e){
window.e;//事件发生时，自动获得事件对象
}
兼容写法：
function fun(e){
e = e | window.e;
}
取消冒泡
DOM标准：
e.Propagation();
IE8：
e.cancelBubble = true;
兼容写法：
if (e.stopPropagation()) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
本人使用的Chrome浏览器，故将上面代码中js部分中的fun函数做如下改动
function fun(e) {
console.log(this.className);
e.stopPropagation();
}
并删掉之前加入的
true
点击蓝色区域，输出结果如图：