何为事件冒泡

在一个对象（节点）上触发某类事件（例如onclick点击事件），该对象定义了某类事件的处理函数，则当事件触发时会调用该处理函数。如果没有定义该事件处理函数或者是该事件函数返回true，那么该事件触发会向该对象的父级对象传播，层级顺序从内(该对象)到外(父级)，直到所有父级对象的同类事件都被激活、或者到达了对象层级的最高级。

查看被触发事件的目标节点

在触发事件的处理函数时，可以传入一个事件参数（形参ev），该ev包含了事件触发的参数，比如：click事件有ev.pageX ev.pageY；keydown事件有ev.keyCode等等，在ie中，ev是全局的，通过window.event来获取，其他浏览器都是作为函数的参数传入的。

function seebin(ev){
    if(!ev){ev = window.event;}     // 或者 var ev = ev || window.event;
}

当然还可以查看触发事件的目标节点，是在哪个节点上触发的事件，如下：

function seebin(ev){
    var ev = ev || window.event;
    console.log(ev.target);
}

解决事件冒泡

有两种方法：

1、通过stopPropagation()方法

function (ev){
    var event = ev || window.event;
    if (){
        event.cancelBubble=true;    // ie浏览器的内核使用该方法
    }else{
        event.stopPropagation();    // 在基于firefox内核的浏览器中支持做法stopPropagation
   }
}

2、通过返回值为false:

function (ev){
    return false;
}

注意：  

event.stopPropagation() 的事件处理过程中：阻止了事件冒泡，但不会阻击元素的默认行为  

return false 的事件处理过程中：阻止了事件冒泡，也阻止了元素的默认行为  

当然，还有一种事件方法只阻止默认行为，如下：  

event.preventDefault() 的事件处理过程中：不阻击事件冒泡，但阻击元素的默认行为  

小知识：何为元素的默认行为。比如：a 标签的点击跳转，input 提交表单的提交。

label 的绑定事件冒泡现象

label 标签还有点特殊，就是 label 可以和一个标签绑定来触发同一个事件，一般是和 ingput 标签配合。这会使label的事件冒泡到绑定的元素上面在执行一次相同的事件，这就导致了有时候点击 label 标签时，执行了两次相同的事件函数，却找不到原因。这里在说下 label 的绑定分两种：显式绑定、隐式绑定。  下面的代码点击文字时都会弹出两次一样的弹出框。

1. 显式绑定

<div id="div2" onclick="alert('显式绑定')">
    <input type="radio" name="" id="a" value="" />
    <label for="a">显式绑定</label>
</div>

2. 隐式绑定

<label onclick="alert('隐式绑定')">
    <input type="checkbox" value="" id="">
    <span>隐式绑定</span>
</label>

冒泡排序

何为冒泡排序?

一说冒泡。可能还会有人听到一个词——冒泡排序。

就是 比较相邻的两个元素，如果前一个比后一个大，则交换位置

代码方法：

var arr = [66, 53, 11, 5, 4, 3, 2, 1];
(function () {
    for (var i = 0; i < arr.length - 1; i++) {//比较的次数是length-1
    	for (var j = 0; j < arr.length - 1 - i; j++) {
    		if (arr[j] > arr[j + 1]) {
    			var tmp = arr[j];
    			arr[j] = arr[j + 1];
    			arr[j + 1] = tmp;
    		}
    	}
    }
    alert(arr);
})();