js小知识

onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

文档碎片是什么：

文档碎片:类似一个临时的文档，要所有要加的dom元素先放在这里，达到不要每次操作dom元素
提高页面效率

var d1 = new Date();    //创建十个段落,常规的方式    for(var i = 0 ; i < 1000; i ++) {        var p = document.createElement("p");        var oTxt = document.createTextNode("段落" + i);        p.appendChild (oTxt);        document.body.appendChild(p);    }    var d2 = new Date();    document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));    //使用了createDocumentFragment()的程序    var d3 = new Date();    var pFragment = document.createDocumentFragment();    for(var i = 0 ; i < 1000; i ++) {        var p = document.createElement("p");        var oTxt = document.createTextNode("段落" + i);        p.appendChild(oTxt);        pFragment.appendChild(p);    }    document.body.appendChild(pFragment);    var d4 = new Date();    document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

事件冒泡：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

阻止事件冒泡：<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
{
    alert(obj.id);
    stopBubble(e)
}

//阻止事件冒泡函数
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
</script>