7.4心得
onmouseenter
onmouseenter 事件在鼠標指針移動到元素上時觸發。
提示： 該事件通常與 onmouseleave 事件一同使用, 在鼠標指針移出元素上時觸發。
提示： onmouseenter 事件類似於 onmouseover 事件。 唯一的區別是 onmouseenter 事件不支持冒泡 。
技術細節
是否支持冒泡: No
是否可以取消: No
事件類型: MouseEvent
支持的 HTML 標簽: 所有 HTML 元素，除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>,
<meta>, <param>, <script>, <style>, 和 <title>
onmouseover
onmouseover 事件會在鼠標指針移動到指定的對象上時發生。
語法
onmouseover="SomeJavaScriptCode"
支持該事件的 HTML 標簽：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持該事件的 JavaScript 對象：
layer, link
代碼
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById(‘b1‘).src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById(‘b1‘).src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn"
onmouseover="mouseOver()" onmouseout="mouseOut()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
</html>
onmouseout
onmouseout 事件會在鼠標指針移出指定的對象時發生。
語法
onmouseout="SomeJavaScriptCode"
支持該事件的 HTML 標簽：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持該事件的 JavaScript 對象：
layer, link
代碼
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById(‘b1‘).src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById(‘b1‘).src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn"
onmouseover="mouseOver()" onmouseout="mouseOut()">
<img alt="Visit W3School!" src="/i/example_mouse2.jpg" id="b1" />
</a>
</body>
</html>
onmouseleave
onmouseleave 事件在鼠標移除元素時觸發。
提示： 該事件通常與 onmouseenter 事件一起使用， 該事件在鼠標移動到元素上時觸發。
提示: onmouseleave 事件類似於 onmouseout 事件。 唯一的區別是 onmouseleave 事件不支持冒泡 。
技術細節
是否支持冒泡: No
是否可以取消: No
事件類型: MouseEvent
支持的 HTML 標簽: 所有 HTML 元素，除了:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>
文檔碎片
文件碎片是因為文件被分散保存到整個磁盤的不同地方，而不是連續地保存在磁盤連續的簇中形成的。
產生
(1)在文件操作過程中，Windows系統可能會調用虛擬內存來同步管理程序，這樣就會導致各個程序對硬盤頻繁讀寫，從而產生文件碎片。
(2)還有一種情況就是當中間的一個扇區內容被刪除後，新寫入一個較小的文件，這樣在這個文件兩邊就會出現一些空間，這時候再寫入一個文件，兩段空間的任意一部分都不能容納該文件，這時候就需要將文件分割成兩個部分，碎片再次產生了。
(3)最常見的就是下載電影之類的大文件，這期間大家一般都會處理一下其它事情，而下載下來的電影文件被迫分割成若幹個碎片存儲於硬盤中。因此下載是產生碎片的一個重要源頭。還有就是經常刪除、添加文件，這時候如果文件空間不夠大，就會產生大量的文件碎片，隨著文件的刪改頻繁，這種情況會日益嚴重。
影響
雖然說文件碎片對於正常工作影響並不大，但是會顯著降低硬盤的運行速度，這主要是硬盤讀取文件需要在多個碎片之間跳轉，增加了等待盤片旋轉到指定扇區的潛伏期和磁頭切換磁道所需的尋道時間。
代碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文檔碎片</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
</head>
<body>
<script>
var temp = document.createDocumentFragment();//文檔碎片(當把文檔碎片付給某節點時，只是把文檔碎片中的子節點付給了某節點，它本身並沒有插入到這個節點中)
for (var i=0; i<100; i++) {
var test =document.createElement(‘div‘);//創建一個節點
test.innerHTML = ‘aaa‘ + i;//給節點添加內容
temp.appendChild(test);//把創建的節點插入到temp文檔中
}
document.body.appendChild(temp);//把temp文檔插入到body末尾
</script>
</body>
</html>
事件冒泡
在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那麽
此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那麽這個事件會
向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象所有同類事件都將被激活），或者
它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
作用
（1）事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器
添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件。
<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例子只在外面盒子定義了處理方法，而這個方法一樣可以捕獲到子元素點擊行為並處理它。假設有成千上萬子元素要處理，難道我們要為每個元素加“onclick="eventHandle(event)"”？顯然沒有這種集中處理的方法來的簡單，同時它的性能也是更高的。
function eventHandle(e)
{
var e=e||window.event;
var obj=e.target||e.srcElement;
alert(obj.id+‘ was click‘)
}
</script>
（2）讓不同的對象同時捕獲同一事件，並調用自己的專屬處理程序做自己的事情，就像老板一下命令，各自員工做自己崗位上的工作去了。
<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function outSideWork()
{
alert(‘My name is outSide,I was working...‘);
}
function inSideWork()
{
alert(‘My name is inSide,I was working...‘);
}
//因為下面程序自動激活單擊事件，有些瀏覽器不允許，所以請單擊灰色盒子，從這裏開始下命令，這樣因為冒泡的原因，黑色大盒子也會收到單擊事件，並調用了自己的處理程序。如果還有更多盒子嵌套，一樣道理。
/*
function bossOrder()
{
document.getElmentById(‘inSide‘).click();
}
bossOrder();
*/
</script>
阻止事件冒泡
如果<p>是在<div>裏面，那麽呢，<P>有一個onclick事件，<div>也有onclick事件，為了觸發<P>的點擊事件時，不觸發父元素的點擊事件
代碼
function stopBubble(e){
if(e&&e.stopPropagation){//非IE
e.stopPropagation();
}
else{//IE
window.event.cancelBubble=true;
}
}
<a onclick=‘‘>如果要阻止默認事件的觸發，即默認的href事件，那麽就需要調用如下函數：
代碼如下:
function stopDefault( e ) {
//阻止默認瀏覽器動作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函數器默認動作的方式
else
window.event.returnValue = false;
return false;
}
7.4心得