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
点击蓝***域，输出结果如图：