Javascript的事件冒泡和事件捕获，阻止事件冒泡，事件源target

class="baidu_pl"> <class="tags" href="/tags/DIV.html" title=div>div id="article_content" class="article_content clearfix"> <class="tags" href="/tags/DIV.html" title=div>div id="content_views" class="htmledit_views">

事件冒泡

事件捕获：父级元素先触发，子级元素后触发

事件冒泡：子级元素先触发，父级元素后触发

现在在IE和FF下，触发事件基本都是事件冒泡，由内向外的执行

class="language-html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/class="tags" href="/tags/XHTML.html" title=xhtml>xhtml1/DTD/class="tags" href="/tags/XHTML.html" title=xhtml>xhtml1-transitional.dtd">

class="language-html"><html xmlns="http://www.w3.org/1999/class="tags" href="/tags/XHTML.html" title=xhtml>xhtml">
<head>
    <title>冒泡事件</title>
    <style type="text/css">
        *{ margin:0; padding:0; }
        .class="tags" href="/tags/DIV.html" title=div>div1{ width:200px; height:200px; background-color:#cccccc; overflow:hidden; }
        .class="tags" href="/tags/DIV.html" title=div>div2{ width:100px; height:100px; background-color:gray; margin:50px; }
    </style>
</head>
<body>
    <class="tags" href="/tags/DIV.html" title=div>div class="class="tags" href="/tags/DIV.html" title=div>div1" οnclick="class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript:alert('外');">
        <class="tags" href="/tags/DIV.html" title=div>div class="class="tags" href="/tags/DIV.html" title=div>div2" οnclick="class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript:alert('内');"></class="tags" href="/tags/DIV.html" title=div>div>
    </class="tags" href="/tags/DIV.html" title=div>div>
</body>
</html>

点击class="tags" href="/tags/DIV.html" title=div>div2的时候，先显示“内”，再显示“外”，这就是事件冒泡

阻止事件冒泡

方法：

class="language-class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript">        class="tags" href="/tags/FUNCTION.html" title=function>function stopBubble(event) {
            if (event && event.stopPropagation) {
                event.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        }

使用：

class="language-class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript">    //监视用户何时把鼠标移到元素上，
    //为该元素添加红色边框
    unionDom[i].onmouseover = class="tags" href="/tags/FUNCTION.html" title=function>function(e) {
        this.style.border = "1px solid red";
        stopBubble( e );
    };

获取事件源：

class="language-class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript">        class="tags" href="/tags/FUNCTION.html" title=function>function (event) {
            var e = event || window.event;
            var elem = e.srcElement || e.target;

            alert(elem.id);//elem就是事件源
        }

<class="tags" href="/tags/DIV.html" title=div>div>
class="tags" href="/tags/DIV.html" title=div>div> <class="tags" href="/tags/DIV.html" title=div>div>

参考：

class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript事件冒泡与事件捕获

class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript阻止冒泡事件、事件源target、当前目标currentTarget解释

class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript阻止事件冒泡和浏览器的默认行为

新博客已移至：http://keenwon.com

class="tags" href="/tags/DIV.html" title=div>div> class="tags" href="/tags/DIV.html" title=div>div> class="tags" href="/tags/DIV.html" title=div>div> <class="tags" href="/tags/DIV.html" title=div>div id="treeSkill">class="tags" href="/tags/DIV.html" title=div>div>