码迷,mamicode.com
首页 > 编程语言 > 详细

浅析JavaScript事件流——冒泡

时间:2016-04-19 19:12:50      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:

什么是事件冒泡流

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

为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传令兵接到士官战事信息,打出旗语,百米之外的第二个传令兵看到后打出同样的旗语,第三个,第四个....,直到信息传到诸葛亮手中。用专业术语解释就是:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到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),是一种计算机科学领域的较简单的排序算法
它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。(来自百度百科)
冒泡排序算法的运作如下:(从后往前)
  1. 比较相邻的元素。如果第一个比第二个大,就交换他们两个。
  2. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。
  3. 针对所有的元素重复以上的步骤,除了最后一个。
  4. 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。

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事件流——冒泡

标签:

原文地址:http://www.cnblogs.com/qjqcs/p/5409326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!