DOM事件之事件冒泡

什么是事件流？

事件流----描述的是从页面中接受事件的顺序。

IE浏览器的是事件冒泡流

什么是事件冒泡呢？

事件冒泡：指事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

例如：

<div id="box">
            <input type="button" value="按钮"  id="btn"/>
            
        </div>

当点击了该按钮的时候，浏览器会默认为点击了该按钮的同时也会触发包含该按钮的容器div，当点击div时会触发body,当点击body时会触发整个html，之后再进行点击HTML会触发整个document。

事件冒泡兼容各种浏览器。

什么是事件捕获呢？

事件捕获与事件冒泡刚好相反，事件捕获：指不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。就以上面的为例子：触发的顺序为：document->html->body->div->input

事件捕获比较支持的是老版本的浏览器。

事件处理程序

1、Html事件处理程序

直接将事件写入HTML结构中：

例如：

效果图：

<div id="box">
            <input type="button" value="按钮"  id="btn" οnclick="alert('欢迎来到perfect*博客园')"/>
            
        </div>

该代码等同于：

<div id="box">
            <input type="button" value="按钮"  id="btn" οnclick="show()"/>
            
        </div>
        <script>
            function show(){
                
                alert('欢迎来到perfect*博客园');
            }
        </script>

HTML事件的缺点：

html和JS代码紧密的耦合在一起：当修改了JS的代码，也需要进行修改HTML结构中相关的代码，比较麻烦。

2、DOM0级事件处理程序

较传统的方式：把一个函数赋值给一个事件的处理程序属性，该事件处理程序用的比较多的方法。

优点：

1、简单

2、跨浏览器的优势

 通过Dom0级添加的事件

当点击按钮2的效果：

不存在HTML事件处理程序的缺点。

btn2.οnclick=null;//删除onclick事件

3、DOM2级事件处理程序

DOM2级事件定义了两个方法：

用于处理指定和删除事件处理程序的操作addEventListener()和removeEvenListener().

接收三个参数：要处理的事件名，作为事件处理程序的事件函数和布尔值；这里的布尔值为true时表示在捕获阶段进行调用事件捕获程序，而false则为在冒泡阶段调用事件冒泡程序。

例如：

实现的效果：

 通过addEventListener()添加的事件只能通过removeEventListener（）进行删除事件，两者是配对使用的，添加了什么参数就删除什么参数。

 总的demo：

 事件处理程序

还有一种写法：使用this：表示这个事件在哪里出发的这个this就会引用它

 效果图：

 从以上可以说明在一个按钮上可以添加多个事件处理程序，进行按顺序进行执行

4、IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

接收相同的两个参数：事件处理的名称和事件处理程序的函数；

不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件的冒泡；

支持IE事件处理程序的浏览器：IE和opera

综上出现的问题：当使用事件Dom2事件处理程序时，IE浏览器不支持，当使用IE事件处理程序时，其它的浏览器不支持，因此引入下面所要说的跨浏览器的事件处理程序。

5、跨浏览器的事件处理程序

建议封装在一个对象类：

var btn3=document.getElementById("btn3");

function show123(){
                
                alert('欢迎来到perfect*博客园123');
            }


//跨浏览器事件处理程序
            var eventUtil={
                //添加句柄
                //触发的对象,触发的事件类型,触发的操作
                addHandler:function(element,type,handler){
                //Dom2级事件处理程序的判断
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                    
                    //IE事件处理程序的判断
                    }else if(element.attachEvent){
                        
                        element.attachEvent('on'+type,handler);
                        //DOM0级事件处理程序的判断
                        }else{
                        element['on'+type]=handler;
                    }
                
                
                },
                
                //删除句柄
                //触发的对象,触发的事件类型,触发的操作
                removeHandler:function(element,type,handler){
                //Dom2级事件处理程序的判断
                if(element.removeEventListener){
                    element.removeEventListener(type,handler,false);
                    
                    //IE事件处理程序的判断
                    }else if(element.detachEvent){
                        
                        element.detachEvent('on'+type,handler);
                        //DOM0级事件处理程序的判断
                        }else{
                        element['on'+type]=null;
                    }
                
                
                },
                }
                eventUtil.addHandler(btn3,"click",show123);

 删除添加的事件：

加入该段代码即可

eventUtil.removeHandler(btn3,"click",show123);