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" onclick="alert('欢迎来到perfect*博客园')"/>
            
        </div>

该代码等同于：

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

 

 

HTML事件的缺点：

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

2、DOM0级事件处理程序

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

优点：

1、简单

2、跨浏览器的优势

 

 

 1 <div id="box">
 2             <input type="button" value="按钮"  id="btn" onclick="show()"/>
 3             <input type="button" value="按钮2"  id="btn2" />
 4         </div>
 5         <script>
 6             function show(){
 7                 
 8                 alert('欢迎来到perfect*博客园');
 9             }
10             
11             var btn2=document.getElementById('btn2');
12             btn2.onclick=function(){
13                 
14                 alert("这是通过Dom0级添加的事件！！");
15             }
16         </script>

通过Dom0级添加的事件