事件

定义：在某一时刻，发生的事

事件流

定义：把触发的事件延一个方向进行传播。两个方向，从里向外（冒泡事件），从外向里（捕获事件）

分类(三类)：

冒泡事件 : 用于IE浏览器
捕获事件：用于Netscape（网景）
DOM事件 ：用于DOM浏览器，且IE、Netscape也支持

例： div——/picture/p/span ：对div设置绑定事件，点击div内的所有子级都能触发事件（冒泡）；如果只对picture/p/span设置，只能点击picture/p/span有效。

事件处理方法

内嵌事件：标签内嵌；调用的是全局函数，一般不建议使用。
DOM 0 级：又叫传统事件
DOM 2 级：现代事件

内嵌事件

在标签内嵌；调用的是全局函数

<body>
    <p onclick='innerEvent()'> 内嵌事件</p>
</body>
<script>
    let innerEvent=function(){
        console.log('Hello');
    }
    window.onload=function(){}
</script>

DOM 0级 (传统事件)

DOM 0级比较常见，节点.onXXX p1.onclick=function(){} 不用驼峰命名法
优点：兼容性好，所有浏览器都支持
缺点：不能为同一事件添加多个处理方法，只能添加一个。如果有多个方法，只最后一个有用，最后一个会覆盖前面的

DOM 2 级 (现代事件)

关键字addEventListener
优点：同一事件可添加多个处理方法
缺点：兼容性，只用于DOM浏览器，不能用于IE
DOM浏览器：节点.addEventListener(事件类型,回调函数,布尔值)；事件类型,无on; 布尔值,true为捕获，false为冒泡，默认ｆａｌｓｅ冒泡，布尔值决定事件是否冒泡，可省略。
IE浏览器：attachEvent(事件类型(有on)，回调)，假的DOM2,ＩＥ没有ＤＯＭ２

DOM浏览器添加冒泡、捕获两种事件，先捕获后冒泡，最后一个标签看写的顺序

addEventDOM2.onclick = function(){
    //DOM浏览器的DOM2级事件处理方法
p1.addEventListener("click",func1,true);    
p1.addEventListener("click",func2); 
}
    //IE浏览器的"DOM2"事件处理方法
 p1.attachEvent("onclick",function(){
    console.log("this is p1 by ie");
 });

 if(document.addEventListener){

 }else{

 }

兼容问题：判断浏览器类型

if(document.addEventListener){

}else{

}

删除事件

DOM 0：用空的函数或空的事件删除；不是真的删除，只是用后来的替换、覆盖前面的
DOM 2 删除 ：
DOM浏览器：removeEventListener('click',要删除的事件回调函数,布尔值)

ＩＥ浏览器：detachEvent('onclick',函数)

let func1 = function(){
    console.log("this is p1 by dom2");
}
let func2 = function(){
    console.log("add new event by dom2");
}
addEventDOM2.onclick = function(){
        //DOM浏览器的DOM2级事件处理方法
    p1.addEventListener("click",func1,true);    
    p1.addEventListener("click",func2); 
}
removeEventDOM2.onclick = function(){
    p1.removeEventListener("click",func1,true); //不加true，只删除一个；前面有设置true，删除也要有true
    p1.removeEventListener("click",func2);

        //IE浏览器的删除事件方法
    p1.detachEvent("onclick",func1);