事件流讲解来袭，嘎嘎嘎嘎嘎
----------------------------------------------------------------
1.事件流：描述的是在页面中接受事件的顺序。
2.事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）。
3.事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。
--------------------------------------------------------------------
事件处理：
1.HTML事件处理：直接添加到HTML结构中（例：之前的onclick等，可以往前查看例子）。
2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例（针对2）：<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn");
btn.onclick=function(){
alert("hello,DOM0级事件处理程序1。");
}
</script>
结果：界面出现
，鼠标点击按钮后，弹出对话框
若在上述代码中稍做改变：
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn");
btn.onclick=function(){
alert("hello,DOM0级事件处理程序1。");
}
btn1.onclick=function(){
alert("hello,DOM0级事件2.");
}
</script>
结果：界面出现一按钮
，鼠标点击后弹出对话框
我们可以发现对二个函数对第一个进行了覆盖，即这就是DOM0级事件的缺点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.DOM2级事件处理：
（1）addEventListener("事件名"，“事件处理函数”，“布尔值”)
true：事件捕获。
false:事件冒泡。
（2）removeEventListener();
详细前几我上篇里面的 DOM EventListener.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
例：
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn").addEventListener("click",demo);
function demo(){
alert("DOM2事件。");
}
</script>
结果：按钮，点击按钮，弹出提示框DOM2事件。
优点：对比于DOM0级事件，DOM2级不会有覆盖现象。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-----------------------------------------------------------------------------------------
4.IE事件处理程序
attachEvent:添加事件；
detachEvent:移除事件。
（ps:这两个的运用原理跟addEventListener()和removeEventListener()差不多，只是涉及到浏览器的是否能执行后用的，处理兼容问题。）
-------------------------------------------------------------------------------------------
例：(解决了兼容问题的例子，综合例子。)
<div>
<button id="btn1">按钮</div>
</div>
<script>
var btn1=document.getElementById("btn1");
if(btn1.addEventListener()){
btn1.addEventListener("cilck",demo);
}else if(btn1.attachEvent){
btn1.attachEvent("onclick",demo);
}else{
btn1.onclick=demo();
}
function demo(){
alert("综合例子");
}
</script>