js中的事件冒泡和事件捕获

事件传播的机制(冒泡和捕获) 事件冒泡和事件捕获的区别

事件捕获（event capturing）：
当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，
即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡（dubbed bubbling）：
与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

事件冒泡可以被阻止

			// event.stopPropagation();//不支持IE
            // window.event.cancelBubble = true;//支持IE
            //兼容代码
            function stopBubble(e){
                e = e || e.window;
                if(e.stopPropagation){
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                }
            }

事件捕获不可以被阻止，但可以阻止事件默认行为

        	//阻止事件的默认行为
            // e.preventDefault();//不支持IE
            // window.event.returnValue;//支持IE
            //兼容代码
            function stopDefault(e) {
            e = e || e.window;
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }

事件冒泡经典案例
给每一个li标签注册事件

	<ul id="ul">
        <li>我是li标签1</li>
        <li>我是li标签2</li>
        <li>我是li标签3</li>
        <li>我是li标签4</li>
        <li>我是li标签5</li>
        <li>我是li标签6</li>
        <li>我是li标签7</li>
        <li>我是li标签8</li>
    </ul>
    <script>
    	var ul = document.getElementById("ul");
        ul.onclick = function(e) {
            e = e || window.event;
            //console.log(e.target); // IE8不认target这个属性
            //console.log(e.srcElement); // IE8的事件目标元素
            e.target = e.target || e.srcElement;
            console.log(e.target);
        }
    </script>