javascript事件之： 事件冒泡， 事件捕获 ，阻止默认事件

转自：红黑联盟

谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。

 

　　冒泡篇：

 

　　先来看一段实例：

 

　　js:

 

 

        var $input = document.getElementsByTagName("input")[0];

        var $div = document.getElementsByTagName("div")[0];

        var $body = document.getElementsByTagName("body")[0];

        

        $input.onclick = function(e){

            this.style.border = "5px solid red"

            var e = e || window.e;

            alert("red")

        }

        $div.onclick = function(e){

            this.style.border = "5px solid green"

            alert("green")

        }

        $body.onclick = function(e){

            this.style.border = "5px solid yellow"

            alert("yellow")

        }

 

html:

 

    <div>

        <input type="button" value="测试事件冒泡" />

    </div>

依次弹出”red“,"green","yellow"。

 

你的本意是触发button这个元素，却连同父元素绑定的事件一同触发。这就是事件冒泡。

 

如果对input的事件绑定改为：

 

$input.onclick = function(e){

    this.style.border = "5px solid red"

    var e = e || window.e;

    alert("red")

    e.stopPropagation();

}

这个时候只会弹出”red“

 

因为阻止了事件冒泡。

 

 

 

捕获篇：

 

既然有事件的冒泡，也可以有事件的捕获，这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。

 

来看代码：

 

 

 

$input.addEventListener("click", function(){

    this.style.border = "5px solid red";

    alert("red")

}, true)

$div.addEventListener("click", function(){

    this.style.border = "5px solid green";

    alert("green")

}, true)

$body.addEventListener("click", function(){

    this.style.border = "5px solid yellow";

    alert("yellow")

}, true)

 

这个时候依次弹出”yellow“,"green","red"。

 

这就是事件的捕获。

 

如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,"green","yellow"。

 

 

 

阻止默认事件篇：

 

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。

 

如果你想阻止这些 浏览器默认行为， JavaScript为你提供了方法。

 

先上代码

 

 

1 var $a = document.getElementsByTagName("a")[0];

2 $a.onclick = function(e){

3     alert("跳转动作被我阻止了")

4     e.preventDefault();

5     //return false;//也可以

6 }

 

 

默认事件没有了。

 

既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。

 

仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。