單擊，顯示警告框。onclick特性的值不能使用未經轉移的HTML語法字元：&，"，<，>。若想使用雙引號： 通過event變數，可以直接訪問事件對象，且，在函數內部，this值等於事件的目標元素，例： 還可以使用擴展作用域，在函數內部可以像訪問局部對象一樣訪問document及該元素本身，so可以
第13章，事件
事件冒泡
IE的事件叫做事件冒泡：由具體到不具體 <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div> </body> </html> 如果你單擊了<div>元素，那麼這個click事件按如下順序傳播： <div> --> <body> --> <html> --> document 事件冒泡過程：
事件捕獲：
Netscape Communicator團隊提出事件流：事件捕獲：由不具體到具體 依然以上面的頁面為例，如果你單擊了<div>元素，那麼這個click事件按如下順序傳播： document --> <html> --> <body> --> <div>
HTML事件處理程式
例：<input type="button" value="Click Me" onclick="alert('Clicked')" />
單擊，顯示警告框。onclick特性的值不能使用未經轉移的HTML語法字元：&，"，<，>。若想使用雙引號：
<input type="button" value="Click Me" onclick="alert("Clicked")" /> <!-- 輸出 “click” --> <input type="button" value="Click Me" onclick="alert(event.type)" />
通過event變數，可以直接訪問事件對象，且，在函數內部，this值等於事件的目標元素，例：
<!-- 輸出 “Click Me” --> <input type="button" value="Click Me" onclick="alert(this.value)" />
還可以使用擴展作用域，在函數內部可以像訪問局部對象一樣訪問document及該元素本身，so可以如下使用with擴展作用域：
function(){ with(document){ with(this){ //元素屬性值 } } }
如此一來，事件處理程式訪問屬性就簡單多了：
<!-- 輸出 “Click Me” --> <input type="button" value="Click Me" onclick="alert(value)" />
可能是form表單輸入元素，則作用域還會包含表單元素（父元素）的入口：
function(){ with(document){ with(this.form){ with(this){ //元素屬性值 } } } }
實際上只是為了讓事件處理程式無需引用表單元素就能訪問其他表單欄位：
<form> <input type="text" name="username" value=""> <input type="button" value="Echo Username" onclick="alert(username.value)"> </form>缺點： 1、存在時差問題，也許用戶在HTML元素一齣現就點擊，但事件處理程式也許還不具備執行條件，則點擊會出錯，為此HTML事件處理程式都會裝在一個try-catch語句中，例：
<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}" />2、這樣擴展作用域，在不同瀏覽器會導致不同結果，容易出錯 3、HTML與js代碼緊密耦合，不易修改
DOM0級事件處理程式
傳統方式：將函數賦值給事件處理程式屬性，原因：1、簡單，2、有跨瀏覽器優勢 每個元素都有自己的事件處理程式屬性，通常全部小寫，例onclick，使用示例：var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert("Clicked"); };
使用DOM0級事件處理程式被認為是元素的方法，為此是在元素作用域中運行，即，程式中的this引用當前元素，例：
var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert(this.id); //"myBtn" };以上方式會在事件流的冒泡階段處理 刪除程式：
btn.onclick = null; //刪除事件處理程式
DOM2級事件處理程式
定義兩個方法用於處理指定和刪除事件處理程式的操作：addEventListener()，removeEventListener()，所有DOM節點都包含這兩個方法，且都接收3個參數：要處理的事件名，作為事件處理程式的函數，布爾值。布爾值為true，捕獲階段調用函數，false，冒泡階段調用函數
var btn = document.getElementById("myBtn"); btn.addEventListener("click",function(){ alert(this.id); },false);
使用DOM2級好處：添加多個程式，觸發順序按添加順序
var btn = document.getElementById("myBtn"); btn.addEventListener("click",function(){ alert(this.id); },false); btn.addEventListener("click",function(){ alert("hello"); },false);
通過addEventListener添加，只能通過removeEventListener刪除，刪除時傳入參數與添加時參數相同，即若是添加時使用了匿名函數，則無法移除：
//無效的事件處理程式移除 var btn = document.getElementById("myBtn"); btn.addEventListener("click",function(){ alert(this.id); },false); //其他代碼 btn.removeEventListener("click",function(){ //無效 alert(this.id); },false);都為匿名函數，代表的卻不是同一個函數 轉換：
//有效的事件處理程式移除 var btn = document.getElementById("myBtn"); var handle = function(){ alert(this.id); } btn.addEventListener("click",handle,false); //其他代碼 btn.removeEventListener("click",handle,false); //有效註：大多數情況下添加到冒泡階段，可以最大限度相容瀏覽器，不建議在捕獲階段註冊處理程式
IE事件處理程式
實現與DOM類型的方法：attachEvent，detachEvent，接收相同的兩個參數：程式名稱，程式函數var btn = document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ alert(this.id); });attachEvent是在全局作用域運行，因此this指向window attachEvent也可以添加多個處理程式，不過，觸發按添加相反順序觸發 attachEvent添加的只能detachEvent移除，一樣不能使用匿名函數
跨瀏覽器的事件處理程式
//跨瀏覽器事件處理程式 var EventUtil = { addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); //DOM2級 }else if(element.attachEvent){ element.attachEvent("on" + type,handler); //相容IE8及更早版本，加上“on”，IE方法 }else{ element["on" + type] = handler; //DOM0 } }, removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false);//DOM2級 }else if(element.detachEvent){ element.detachEvent("on" + type,handler) //相容IE8及更早版本，加上“on”，IE方法 }else{ element["on" + type] = null; } } };
使用示例：
//使用示例 var btn = document.getElementById("myBtn"); var handler = function(){ alert("hello"); }; EventUtil.addHandler(btn,"click",handler); //其他代碼 EventUtil.removeHandler(btn,"click",handler);
事件對象
相容DOM的瀏覽器會傳入一個event對象到事件處理程式中 event對象包含與創建它的特定事件有關的屬性和方法，觸發類型不一樣，可用屬性方法不一樣，但都有下表成員| 屬性/方法 | 類型 | 讀/寫 | 說明 |
| bubbles | Boolean | 只讀 | 是否冒泡 |
| cancelable | Boolean | 只讀 | 會否可取消預設行為 |
| currentTarget | Element | 只讀 | 當前處理的元素 |
| defaultPrevented | Boolean | 只讀 | true表示已調用preventDefault方法(DOM3新增) |
| detail | Integer | 只讀 | 與事件相關細節信息 |
| eventPhase | Integer | 只讀 | 1、捕獲階段，2、處於目標，3、冒泡階段 |
| preventDefault | Function | 只讀 | 取消時間預設行為，cancelable為true可使用 |
| stopImmediatePropagation | Function | 只讀 | 取消事件的進一步捕獲或冒泡，並阻止事件處理程式調用(DOM3新增) |
| stopPropagation | Function | 只讀 | 取消事件進一步捕獲或冒泡，若bubbles為true，可使用此方法 |
| target | Element | 只讀 | 事件目標 |
| trusted | Boolean | 只讀 | true事件由瀏覽器生成，false事件由js生成（DOM3新增） |
| type | String | 只讀 | 被觸發事件類型 |
| view | AbstractView | 只讀 | 與事件關聯的抽象視圖，等同於發生事件的window對象 |
在事件處理程式內部，this始終等於currentTarget，target只包含事件實際目標（個人理解：就是事件在哪個元素產生，就是那個元素），若直接將事件處理程式指定給目標元素，則三者相同值，例：
var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert(event.currentTarget === this); //true alert(event.target === this); //true }
若事件在按鈕父節點，則不一樣：
document.body.onclick = function(event){ alert(event.currentTarget === document.body); //true alert(this === document.body); //true alert(event.target === document.getElementById("myBtn")); //true }
在需要一個函數處理多個事件時，可以使用type屬性：
//一個函數處理多個事件 var btn = document.getElementById("myBtn"); var handler = function(event){ switch(event.type){ case "click": alert("click"); break; case "mouseover": alert("mouseover"); break; case "mouseout": alert("mouseout"); break; } }; btn.onclick = handler; btn.onmouseover = handler; btn.onmouseout = handler;
IE中的事件對象
與訪問DOM中的event對象不同，要訪問IE中的event對象有幾種不同的方式，取決於事件處理程式的方法。DOM0級方法，event作為window對象的一個屬性存在var btn = document.getElementById("myBtn"); btn.onclick = function(){ var event = window.event; alert(event.type); //"click" };
事件處理程式使用attachEvent添加，那麼會有個event對象傳入：
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick",function(event){ alert(event.type); //"click" });
若通過HTML指定事件處理程式還可以通過一個名叫event的變數訪問event對象，例：
<input type="button" value="Click Me" onclick="alert(event.type)">IE的event對象一樣包含與創建它的事件相關的屬性和方法，基本都有對應的DOM屬性和方法，也因事件類型不同而不同，但都有如下屬性：
| 屬性/方法 | 類型 | 讀/寫 | 說明 |
| cancelBubble | Boolean | 讀/寫 | 預設false，設為true，取消事件冒泡 |
| returnValue | Boolean | 讀/寫 | 預設true，設為false可以取消事件預設行為，與DOM的preventDefault方法一樣 |
| serElement | Element | 只讀 | 事件目標，與DOM的target相同 |
| type | String | 只讀 | 被觸發的事件類型 |
因為事件處理程式的作用域是根據指定它的方式來確定的，所以不能認為this會始終等於事件目標，為此，最好使用event.serElement比較保險，例：
var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert(window.event.srcElement === this); //true }; btn.attachEvent("onclick",function(event){ alert(event.srcElement === this); //false });
跨瀏覽器事件對象：
//跨瀏覽器事件對象 var EventUtil = { addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); //DOM2級 }else if(element.attachEvent){ element.attachEvent("on" + type,handler); //相容IE8及更早版本，加上“on”，IE方法 }else{ element["on" + type] = handler; //DOM0 } }, getEvent:function(event){ //返回對event對象的引用 return event?event:window.event; }, getTarget:function(event){ //返回事件的目標 return event.target||event.srcElement; }, preventDefault:function(event){ //取消事件預設行為 if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false);//DOM2級 }else if(element.detachEvent){ element.detachEvent("on" + type,handler) //相容IE8及更早版本，加上“on”，IE方法 }else{ element["on" + type] = null; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } }; //使用示例 btn.onclick = function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); }; var link = document.getElementById("myLink"); link.onclick = function(event){ //可確保在所有瀏覽器中單擊該鏈接都不會打開另一個頁面 event = EventUtil.getEvent(event); EventUtil.preventDefault(event); }; //由於IE不支持事件捕獲，所以只能用來阻止事件冒泡 var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert("Clicked"); event = EventUtil.getEvent(event); EventUtil.stopPropagation(event); }; document.body.onclick = function(event){ alert("body clicked"); };
事件類型
UI事件
DOMActivate：表示元素已被激活，DOM3已廢棄，不建議使用 load：頁面完全載入後在window上面觸發，當所有框架載入完在框架集上觸發，當圖像載入完在<img>元素觸發，當嵌入內容載入完在<object>元素上面觸發 unload：與load的載入相反 abort：在用戶停止下載過程時，若嵌入內容沒有載入完，在<object>元素上觸發 error：js錯誤在window觸發，無法載入圖像在<img>觸發，無法載入嵌入內容在<object>觸發，或當一個或多個框架無法載入在框架集上觸發 select：用戶選擇文本框一或多個字元時觸發 resize：視窗或框架大小變化時在window或框架上觸發 scroll：用戶滾動帶滾動條的元素中的內容時，在該元素觸發，<body>包含所載入頁面滾動條 除DOMActivate事件外，其他事件在DOM2級都為HTML事件，DOMActivate在DOM2中依舊是UI事件//瀏覽器是否支持DOM3級事件定義的事件 var isSupported = document.implementation.hasFeature("UIEvent","3.0");
1、load事件
當頁面完全載入完後（包括圖像，js，css等外部文件），就會觸發window的load事件EventUtil.addHandler(window,"load",function(event){ alert("Loaded"); });
第二種指定onload事件處理程式方式是為<body>添加onload屬性：
<!DOCTYPE html> <html> <head> <title>Load Event Example</title> </head> <body onload="alert('Loaded!')"> </body> </html>建議：儘可能使用js方式 在IE9+，Firefox，Opera，Chrome，Safari3+中，<script>也會觸發load事件，可以確定動態載入的js文件是否載入完畢，例：
EventUtil.addHandler(window,"load",function(){ var script = document.createElement("script"); EventUtil.addHandler(script,"load",function(event){ alert("Loaded"); }); script.src = "example.js"; document.body.appendChild(script); });IE和Opera還支持<link>上的load事件，以便確定動態載入的樣式表是否載入完畢
2、unload事件
與load相對應，使用方式一致，也有兩種方式 註：無論哪種方式，都要小心編寫onunload代碼。unload事件是在一切都被卸載之後才觸發，那麼頁面載入後存在的對象，此時就不一定存在。3、resize事件
瀏覽器視窗被調整時在window上觸發，所以可以通過js或<body>元素中的onresize特性來指定事件處理程式4、scroll事件
雖然在window對象上發生，但它實際表示的則是頁面中相應元素的變化焦點事件
blur：元素失去焦點時觸發，不會冒泡，所有瀏覽器支持 DOMFocusIn：元素獲得焦點觸發，與HTML事件focus等價，冒泡，只有Opera支持，DOM3廢棄，選擇focusIn DOMFocusOut：元素失去焦點觸發，是HTML事件blur的通用版本，只有Opera支持，DOM3廢棄，選擇focusOut focus：元素獲得焦點觸發，不冒泡，所有瀏覽器支持 focusIn：元素獲得焦點觸發，與HTML事件focus等價，冒泡，支持的瀏覽器：IE5.5+，Safari5.1+，Opera11.5+，Chrome focusOut：元素失去焦點觸發，與HTML事件focus等價，冒泡，支持的瀏覽器：IE5.5+，Safari5.1+，Opera11.5+，Chrome 當焦點從頁面一個元素移動到另一個元素，依次觸發事件： focusOut：失去焦點的元素觸發 focusIn：獲得焦點的元素觸發 blur：失去焦點的元素觸發 DOMFocusOut：失去焦點的元素觸發 focus：獲得焦點的元素觸發 DOMFocusIn：獲得焦點的元素觸發 確定瀏覽器是否支持這些事件：//確定瀏覽器是否支持焦點事件 var isSUpported = document.implementation.hasFeature("FocusEvent","3.0");
滑鼠與滾輪事件
click：單擊主滑鼠（一般為左鍵），或按下回車 dbclick：雙擊主滑鼠 mousedown：用戶按下任意滑鼠按鈕觸發，不能通過鍵盤觸發 mouseenter：滑鼠游標從元素外部首次移動到元素範圍之內觸發，不冒泡，移動到後代元素不觸發，IE，Firefox9+，Opera支持 mouseleave：在位於元素上方的滑鼠游標移動到元素範圍之外觸發，不冒泡，移動到後代元素不觸發，IE，Firefox9+，Opera支持 mousemove：滑鼠指針在元素內部移動時重覆觸發，不能通過鍵盤觸發 mouseout：從一個元素上方移動到另一個元素上方觸發，不能通過鍵盤觸發 mouseover：在滑鼠指針位於一個元素外部，首次移入另一個元素邊界之內觸發，不能通過鍵盤觸發 mouseup：釋放滑鼠按鈕觸發，不能通過鍵盤觸發 mousedown + mouseout 觸發 click，有一個被取消，click都不會觸發，click + click 觸發 dbclick 檢測瀏覽器是否支持以上DOM2級事件（除dbclick，mouseenter，mouseleave）//確定瀏覽器是否支持DOM2級滑鼠事件 var isSUpported = document.implementation.hasFeature("MouseEvents","2.0"); //確定瀏覽器是否支持所有滑鼠事件 var isSUpported = document.implementation.hasFeature("MouseEvent","3.0"); //差了個s滾輪事件，mousewheel事件
1、客戶區坐標位置
clientX，clientY，保存滑鼠事件在瀏覽器視口的特定位置，表示事件發生時滑鼠在視口中的水平和垂直坐標 註意：並不包括頁面滾動距離，因此並不表示滑鼠在頁面上的位置，只是視口位置2、頁面坐標位置
pageX，pageY，保存滑鼠事件發生在頁面的具體位置 IE8級更早版本不支持事件對象上的頁面坐標，使用客戶區坐標和滾動信息可以計算出來，使用document.body（混雜模式）或document.documentElement（標準模式）中的scrollLeft和scrollTop，例：var div = document.getElementById("myDiv"); EventUtil.addHandler(div,"click",function(event){ event = EventUtil.getEvent(event); var pageX = event.pageX; pageY = event.pageY; if(pageX == undefined){ pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if(pageY == undefined){ pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } alert("Page coordinates: " + pageX + "," + pageY); });
3、屏幕坐標位置
screenX，screenY，保存相對於整個電腦屏幕的位置4、修改鍵
Shift,Ctrl,Alt,Meta（window鍵盤的window鍵，蘋果的cmd），用來修改滑鼠事件的行為，DOM規定4個屬性：shiftKey，ctrlKey，altKey，metaKey，包含的都是布爾值，IE9、Firefox，Safari，Chrome，Opera都支持這四個屬性，IE8及之前不支持5、相關元素
mouseover，mouseout事件會涉及更多元素，mouseover，主要目標是獲得游標的元素，相關元素是失去游標的元素，mouseout，主要目標是失去游標的元素，相關元素是獲得游標的元素 DOM通過event對象的relatedTarget屬性提供了相關的信息，這個屬性只對mouseover，mouseout事件才包含值，其他的事件為null，IE8及之前版本不支持，提供其他屬性。在mouseover觸發時，IE的fromElement保存相關元素，在mouseout觸發，IE的toElement保存相關元素（IE9支持所有這些屬性）。把跨瀏覽器取得相關元素的方法加入到EventUtil對象中var EventUtil = { //其他代碼 getRelatedTarget:function(event){ if(event.relatedTarget){ return event.relatedTarget; }else if(event.toElement){ return event.toElement; }else if(event.fromElement){ return event.fromElement; }else { return null; } }, //其他代碼 };
6、滑鼠按鈕
在mousedown，mouseup中event對象保存一個button屬性，0、主按鈕，1、中間按鈕（滾輪），2、次按鈕 IE8及更早版本也提供button屬性，但與DOM的button屬性值有大差異： 0：沒有按下按鈕 1：按下主按鈕 2：按下次按鈕 3：同時按下主次按鈕 4：按下中間按鈕 5：同時按下主和中 6：同時按下次和中 7：同時按下三鍵 為EventUtil對象添加getButton方法：var EventUtil = { //其他代碼 getButton:function(event){ if(document.implementation.hasFeature("MouseEvents","2.0")){ //檢測MouseEvents特性可以知道event對象存在的button屬性是否包含正確的值，失敗，說明是IE return event.button; }else{ switch(event.button){ case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }, //其他代碼 }
7、更多的事件信息
並沒啥用，一方面只有IE支持，另一方面，提供的信息要麼沒啥用，要麼可以通過其他方式計算出來8、滑鼠滾輪事件
mousewheel，IE6首先實現，Opera，Chrome，Safari隨後也支持，與mousewheel事件對應的event對象另外包含了一個特殊的wheelDelta屬性，當用戶向前滾動滾輪，wheelDelta為正數，向後為負數 註：Opera9.5之前是正負號是相反的 Firefox支持一個名為DOMMouseScroll的類似事件，滾輪信息保存在detail屬性中，向前是負數，向後是正數 將獲取滑鼠滾輪增量值的方法添加到EventUtil對象中：var EventUtil = { //其他代碼 getWheelDelta:function(event){ if(event.wheelDelta){ return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); }else{ return -event.detail * 40; } }, //其他代碼 }
9、觸摸設備
10、無障礙性問題
鍵盤與文本事件
鍵盤事件的支持主要遵循DOM0級3個鍵盤事件：
keydown：按下鍵盤任意鍵觸發，按住不放可以重覆觸發 keypress：按下字元鍵觸發，按住不放可以重覆觸發，ESC也會觸發，Safari3.1之前版本按下非字元鍵也會觸發 keyup：釋放鍵盤上的按鍵觸發 只有一個文本事件：textInput，在文本插入文本框之前觸發 鍵盤事件與滑鼠事件一樣，支持修改鍵，IE不支持metaKey1、鍵碼
發生keydown和keyup事件時，event對象的keyCode屬性會包含一個代碼，DOM和IE的event對象都支持2、字元編碼
IE9、Firefox、Chrome、Safari的event對象都支持一個charCode屬性，只有發生keypress事件才包含值，代表按下的鍵的ASCII編碼。此時keyCode為0或者等於按鍵鍵碼。 跨瀏覽器方式取得字元編碼var EventUtil = { //其他代碼 getCharCode:function(event){ if(typeof event.charCode == "number"){ return event.charCode; }else{ return event.keyCode; } }, //其他代碼 }取得的字元編碼可以使用String.fromCharCode()將其轉換成實際字元
3、DOM3級變化
DOM3不再包含charCode屬性，改為新屬性：key，char key為了取代keyCode新增，值是字元串，按下某個字元鍵時，是對應的文本字元，按下非字元鍵，是相應鍵值（shift等），char屬性的值在按下字元鍵與key相同，按下非字元鍵為null IE9+支持key，不支持char，Safari5和Chrome支持名為keyIdentifier的屬性，按下非字元鍵與key同，按下字元鍵返回格式U+0000的字元串，表Unicode值 註：為跨瀏覽器，不推薦使用key，keyIdentifier，char DOM3級事件還添加一個location屬性，是一個數值 0：預設鍵盤 1：左側位置（左alt） 2：右側位置（右alt） 3：數字小鍵盤 4：移動設備鍵盤（虛擬鍵盤） 5：手柄（任天堂Wii控制器） IE9支持這個屬性，Safari和Chrome支持名為keyLocation屬性，但有bug，值始終為0，除非按下數字鍵，值為3，否則不會是1245的值 註：支持location瀏覽器不多，不推薦使用4、textInput事件
DOM3級事件規範引入新事件：textInput。在可編輯區域中輸入字元觸發。與keypress的textInput事件行為稍為不同。 區別一： 任何可以獲得焦點的元素都可以觸發keypress事件，但只有可編輯區域才能觸發textInput事件 區別二： textInput事件只有用戶輸入能夠輸入實際字元的鍵才會觸發，keypress事件則再按下能夠影響文本顯示的鍵（退格鍵）也會觸發 textInput事件主要考慮字元，因此它的event對象還包含一個data屬性，保存用戶輸入的字元 使用textInput事件的例子：var textbox = document.getElementById("myText"); EventUtil.addHandler(textbox,"textInput",function(event){ event = EventUtil.getEvent(event); alert(event.data); });event對象上還有一個屬性：inputMethod，表示把文本輸入文本框的方式 0：不確定 1：鍵盤輸入 2：粘貼 3：拖放 4：IME輸入 5：表單選擇某一項輸入 6：手寫輸入（比如使用手寫筆） 7：語音輸入 8：幾種方法組合輸入 9：腳本輸入 支持textInput屬性的瀏覽器：IE9+，Safari和Chrome，只有IE支持inputMethod屬性
5、設備中的鍵盤事件
複合事件
DOM3中新添加事件，用於處理IME（Input Method Editor，輸入法編輯器）輸入序列，可以讓用戶輸入物理鍵盤上找不到的字元變動事件
DOM2級的變動事件能在DOM中的某一部分發生變化時給出提示。是為XML或HTML DOM設計的，並不特定於語言。DOM2級變動事件： DOMSubtreeModified：DOM結構發生任何變化觸發，在其他任何事件觸發後都會觸發 DOMNodeInserted：在一個節點作為子節點被插入到另一個節點時觸發 DOMNodeRemoved：節點移除觸發 DOMNodeInsertedIntoDocument：在節點被直接插入文檔或通過子樹間接插入文檔之後觸發，在DOMNodeInserted之後觸發 DOMNodeRemovedFromDocument：在節點被直接從文檔或通過子樹間接從文檔中移除之前觸發，在DOMNodeRemoved之後觸發 DOMAttrModified：特性被修改觸發 DOMCharacterDataModified：在文本節點值發生變化觸發//檢查瀏覽器是否支持變動事件 var isSUpported = document.implementation.hasFeature("MutationEvents","2.0");
1、刪除節點
例：<!DOCTYPE html> <html> <head> <title>Node Removal Events Example</title> </head> <body> <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>假設移除<ul>元素，觸發事件順序： 1、在<ul>上觸發DOMNodeRemoved，relatedNode屬性等於document.body 2、在<ul>觸發DOMNodeRemovedFromDocument 3、在身為<ul>子節點的每個<li>及文本節點觸發DOMNodeRemovedFromDocument 4、在document.body觸發DOMSubtreeModified，因為<ul>是document.body的直接子元素
