浅析JavaScript事件流——冒泡

一、什么是事件冒泡流

我们知道事件流指的是从页面中接受事件的顺序。

为了形象理解事件冒泡，可以想象三军主将诸葛亮，在帐内运筹帷幄，眼观六路耳听八方，这时候前方的战事情况就需要靠传令兵来传达，当第一位传令兵接到士官战事信息，打出旗语，百米之外的第二个传令兵看到后打出同样的旗语，第三个，第四个....，直到信息传到诸葛亮手中。用专业术语解释就是：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

（还有一种事件流为捕获，可以理解为诸葛亮向战场上的某位士官发布指令的过程）

二、事件冒泡的用处

1、事件委托

就是把事件处理器（或监听器）添加到parent元素上，避免把其添加到多个子元素上。

<div id="out">

    <span>我是span标签</span>

    <a href="###">我是a标签</a>

</div>

<script>

var out=document.getElementById('out');

out.onclick=function (ev){

    var tags=out.children;

    var event=ev||window.event;

    var target=event.target||event.srcElement;

    // event.target//火狐 事件目标

    // event.srcElement//IE  事件源

    for (var i = 0; i < tags.length; i++) {

        tags[i].style.background='';

    };

    target.style.background='green';      //目标对象背景颜色改变

}

</script>

2、让不同对象捕获同一事件

这个其实是给不同对象绑定相同的触发事件，比如点击onclick,当点击其中一个的话，所有这些对象就会触发各自所对应的函数操作。

<div>

        <span id="sp1">123

                <span id="sp2">456

                        <span id="sp3">789</span>

                </span>

        </span>

</div>

<script>

    var sp1=document.getElementById('sp1');

    var sp2=document.getElementById('sp2');

    var sp3=document.getElementById('sp3');

    sp1.onclick=function(){

        alert("123");

    }

    sp2.onclick=function(){

        alert("456");

    }

    sp3.onclick=function(){

        alert("789");

    }

</script>

三、阻止事件冒泡

先要清楚什么时候需要阻止事件冒泡：比如document上有A事件，div有B事件，div里的span有C事件（ABC是同类型事件，比如都是onclick），若不给div和span阻止事件冒泡的话，点击span时就会触发到B、C事件。所以事件冒泡可能会激活我们本来不想激活的事件，导致程序错乱，所以必要时，我们要阻止事件冒泡。

阻止冒泡事件要考虑浏览器的兼容问题：

if(Event.stopPropagation){

            Event.stopPropagation();      //非IE

}else{

            Event.cancelBubble=true;    //IE

}

四、冒泡排序算法（虽然和JavaScript中的冒泡事件没多大关系，了解一下也不是坏事）

冒泡排序（Bubble Sort），是一种计算机科学领域的较简单的排序算法。

它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。（来自百度百科）

冒泡排序算法的运作如下：（从后往前）

比较相邻的元素。如果第一个比第二个大，就交换他们两个。
对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
针对所有的元素重复以上的步骤，除了最后一个。
持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。

JavaScript冒泡排序：

function bubbleSort(arr) {

    var i = arr.length, j;

    var tempExchangVal;

    while (i > 0) {

        for (j = 0; j < i - 1; j++) {

            if (arr[j] > arr[j + 1]) {

                tempExchangVal = arr[j];

                arr[j] = arr[j + 1];

                arr[j + 1] = tempExchangVal;

            }

        }

        i--;

    }

    return arr;

}

var arr = [3, 2, 4, 9, 1, 5, 7, 6, 8];

var arrSorted = bubbleSort(arr);

console.log(arrSorted);

alert(arrSorted);

秒客网

浅析JavaScript事件流——冒泡

相关文章