7、4
阿新 • • 發佈：2017-07-05
oct 對象 des wms 設計 mouseout 一次 兩個 document 
一、onmouseover、onmouseenter、onmouseout、onmouseleave的區別
onmouseover、nmouseout：鼠標移動到自身時候會觸發事件，同時移動到其子元素身上也會觸發事件
onmouseenter、onmouseleave：鼠標移動到自身是會觸發事件，但是移動到其子元素身上不會觸發事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title></title> <style type=‘text/css‘> *{ margin:0; padding:0;} #box3{ height:100px; background:red; } #box2{ padding:50px; background:blue; } #box1{ padding:50px; background:green; } </style> </head> <body> <div id="box1">1 <div id="box2">2 <div id="box3">3</div> </div> </div> <script type="text/javascript"> /* onmouseover onmouseout onmouseenter onmouseleave */ var oBox1 = document.getElementById(‘box1‘); ///* /* oBox1.onmouseover = function(){ //可以直接通過ID這樣調用，但不提倡 console.log( ‘over‘ ); }; */ oBox1.onmouseout = function(){ //可以直接通過ID這樣調用，但不提倡 console.log( ‘out‘ ); }; //*/ /* oBox1.onmouseenter = function(){ //可以直接通過ID這樣調用，但不提倡 console.log( ‘enter‘ ); }; oBox1.onmouseleave = function(){ console.log( ‘leave‘ ); }; */ </script> </body> </html>
二、文檔碎片
//文檔碎片:類似一個臨時的文檔，要所有要加的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()));
三、事件冒泡
1、什麽是事件冒泡
在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那麽此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那麽這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
打個比方說：你在地方法院要上訴一件案子，如果地方沒有處理此類案件的法院，地方相關部門會幫你繼續往上級法院上訴，比如從市級到省級，直至到中央法院，最終使你的案件得以處理。
2.怎麽阻止事件冒泡
通常情況下我們都是一步到位，明確自己的事件觸發源，並不希望瀏覽器自作聰明、漫無目的地去幫我們找合適的事件處理程序，即我們明確最精準目標，這種情況下我們不需要事件冒泡。另外通過對事件冒泡的理解，我們知道程序將做多較多額外的事情，這必然增大程序開銷。還有一個重要的問題是：事件冒泡處理可能會激活我們本來不想激活的事件，導致程序錯亂，甚至無從下手調試，這常成為對事件冒泡不熟悉程序員的棘手問題。所以必要時，我們要阻止事件冒泡。
<div onclick="openWin(‘http://www.baidu.com‘)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="openWin(‘http://www.google.com‘)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例你實際希望點擊灰色盒子打開google首頁，而點擊黑色盒子打開baidu首頁，但結果你點擊灰色盒子的時候，卻是同時打開了兩個網頁。其實在實際設計中較少遇到此問題，你可能會想如
果我在頁面不同DOM深處安置了不同的按鈕或鏈接，深層處的事件觸發會不會波及頂層的按鈕呢？不會，因為按鈕不能形成嵌套關系。
function openWin(url)
{
window.open(url);
}
</script>
【阻止事件冒泡例子】
<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>
7、4