事件冒泡

之前在项目中遇到了触发js事件后总是会触发服务器端事件，后来网上一查，原来是事件冒泡在作怪。当时问题解决了但是并没有怎么懂。今天在博客园上看到@田想兵博客里提及到事件冒泡，这下才彻底的明白了。在此记录一下，以备不时之需。
 click事件是在鼠标点击后松开时触发的，这里就有有个问题了，如果我一个页面上有个按钮，我在body上写了一个事件方法，然后点击按钮，这时会不会触发body的点击事件了？好，我们看代码：

html:
 <input type="submit" id="mybtn" value="提 交"/>
js:

    $("#mybtn").click(function(e){
        alert("this is button");
        e.preventDefault();//这里是阻止服务器端事件的触发
    });
    $("body").click(function(){
        alert("this is body");
    }); 
运行结果是会依次show出"this is button","this is body"。
这说明，点击按钮是先触发了button之后，然后再往外层触发它的父级的。 这就是所谓的冒泡事件了，不管你套多少层，它都会从里到外一层层的冒泡执行。所以一般点击事件的执行顺序是，当用户点击一个DOM节点时，一个点击事件发送到目标节点，它的父节点、祖节点等，一直到文档树的最外层。这个过程就叫做冒泡。你可能在有些情况下想要阻止冒泡，让事件只发生在目标节点上，你可以使用事件的参数e.stopPropagation();刚才上面的代码还有一个e.preventDefault()，它的意思就是阻止系统默认事件，因为我用的是submit控件，所以我要阻止表单的提交，就用了这个，当然，你还可以用return false;来阻止。e.stopPropagation();是阻止冒泡事件  e.preventDefault();是阻止系统事件,如表单提交

PS：我的淘宝店铺新开业，经营各种桌游，棋牌，希望大伙儿能来看看！http://201314yes.taobao.com/