事件流：事件冒泡，事件捕获，html事件处理，以及DOM0级事件处理程序，和DOM2级事件处理程序

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

2.事件冒泡：

    由最具体的元素接收，然后逐级向上传播至最不具体的元素节点

3.事件捕获

    最不具体的节点先接收事件，到最具体的节点接收

html事件处理有个很大的缺点：修改一处就要同时修改两处，比如函数名称被修改了，那么在HTML文档中的onclick事件名称也必须要被修改掉，这会比较麻烦 可以避免这个问题。就用DOM 0级事件处理。

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

<button οnclick="demo()">按钮</button>

<!-- <script>
function demo(){
alert("hello 这是html事件处理");//：
}

</script> -->

DOM 0级事件处理程序：把一个函数赋值给一个事件处理程序属性

<button id="btn1">按钮</button>
<script>
var btn1 = document.getElementById('btn1');
btn1.onclick = function (){alert("hello 这是DOM 0级事件处理程序1")};//被覆盖掉
btn1.onclick = null;//清除0级事件处理程序
//DOM 0级事件处理程序的优势是，只需在alert里改动一处就可以了，和HTML文档没关系了
//btn1.onclick = function (){alert("hello 这是DOM 0级事件处理程序2")};
//缺点：多个事件会被覆盖掉，只会显示最后一个事件

</script>

 DOM2级事件处理程序： 语法：addEventListener(“事件名”,“事件处理函数”,“布尔值”);true:事件捕获；false:事件冒泡
<button id="btn1">按钮</button>
<script>
document.getElementById("btn1");
addEventListener("click",demo1);
    addEventListener("click",demo2);
    addEventListener("click",demo3);
function demo1(){alert("这是DOM2级事件处理程序1")}
function demo2(){alert("这是DOM2级事件处理程序2")}
function demo3(){alert("这是DOM2级事件处理程序3")}
//依次执行，不会被覆盖
removeEventListener("click",demo2);//要移除哪个事件，就放入哪个事件的监听参数


</script>