DOMNodeInserted監聽div內容改變

  $('.cw-icon .ci-count').on('DOMNodeInserted',function(){
        $(".settleup-content .cont_loading").show();
        $(".settleup-content_box").find("*").remove();
        jQuery.post(Think.U('Home/Cart/getCartInfo') ,{"axm":1},function(data) {
            $(".settleup-content .cont_loading").hide();
            var cart = WST.toJson(data);
            setHtml(cart);
        });
    });
//內容發生改變時執行

JavaScript事件 DOMNodeInserted DOMNodeRemoved

       JavaScript與HTML之間的交互是經過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定交互的瞬間。可使用偵聽器（或處理程序）來預訂事件，以便事件發生時執行相應的代碼。

13.1 事件流

       事件流描述的是從頁面中接收事件的順序。

1.3.1.1 事件冒泡

       IE的事件流叫作事件冒泡（event bubbling），即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，而後逐級向上傳播到較爲不具體的節點（文檔）。

13.1.2 事件捕獲

       事件捕獲(event capturing)的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預約目標以前捕獲它。
13.1.3 DOM事件流

       「DOM2級事件」規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。

13.2 事件處理程序

       事件就是用戶或瀏覽器自身執行某種動做。諸如click、load和mouseover，都是事件的名字。而響應某個事件的函數就叫作事件處理程序（或事件偵聽器）。事件處理程序的名字以「on」開頭。

13.2.1 HTML事件處理程序

       某個元素支持的每種事件，均可以使用一個與相應事件處理程序同名的HTML特性來指定。這個特性的值應該是可以執行的JavaScript代碼。

       事件處理程序中的代碼在執行時，有權訪問全局做用域中的任何代碼。

13.2.2 DOM0級事件處理程序

       經過JavaScript指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。

       使用DOM0級方法指定事件處理程序被認爲是元素的方法。所以，這時候的事件處理程序是在元素的做用域中運行；換句話說，程序中的this引用當前元素。

       以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。

       也能夠刪除經過DOM0級方法指定的事件處理程序，只要將事件處理程序屬性的值設置爲null便可。

       若是你使用HTML指定事件處理程序，那麼onclick屬性的值就是一個包含着同名HTML特性中指定的代碼的函數。而將相應的屬性設置爲null，也能夠刪除以這種方式指定的事件處理程序。

13.2.3 DOM2級事件處理程序

       「DOM2級事件」定義了兩個方法，用於處理指定和刪除事件處理程序的操做：addEventListener()和removeEventListener()。全部的DOM節點中都包含這兩個方法，而且它們都接受3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值

參數若是是true，表示在捕獲階段調用事件處理程序；若是是false，表示在冒泡階段調用事件處理程序。

       與DOM0級方法同樣，這裏添加的事件處理程序也是在其依附的元素做用域中運行。使用DOM2級方法添加事件處理程序的主要好處是能夠添加多個事件處理程序。

       經過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除；移除時傳入的參數與添加處理程序時使用的參數相同。這也意味着經過addEventKListener()添加的匿名函數將沒法移除。

       大多數狀況下，都是將事件處理程序添加到事件流的冒泡階段，這樣能夠最大限度地兼容各類瀏覽器。最好只在須要在事件到達目標以前截獲它的時候將事件處理程序添加到捕獲階段。

       IE九、Firefox、Safari、Chrome和Opera支持DOM2級事件處理程序。

13.2.4 IE事件處理程序

       IE實現了與DOM中相似的兩個方法：attachEvent()和detachEvent()。這個方法接受相同的兩個參數：事件處理程序名稱與事件處理程序函數。因爲IE8及早更早版本只支持事件冒泡，因此經過attachEvent()添加的事件處理程序都會被添加到冒泡階段。

       在IE中使用attachEvent()與使用DOM0級方法的主要區別在於事件處理程序的做用域。在使用DOM0級方法的狀況下，事件處理程序會在其所屬元素的做用域內運行；在使用attachEvent()方法的狀況下，事件處理程序會在全局做用域運行，所以this等於window。

       與DOM不一樣的是，這些事件處理程序不是以添加它們的順序執行的，而是以想法的順序被觸發。

       使用attachEvent()添加的事件能夠經過detachEvent()來移除，條件是必須提供相同的參數。與DOM方法同樣，這也意味着添加的匿名函數將不能被移除。

       支持IE事件處理程序的瀏覽器有IE和Opera。

13.2.5 跨瀏覽器的事件處理程序

       要保證處理事件的代碼能在大多數瀏覽器下一致地運行，只需關注冒泡階段。

13.3 事件對象

       在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含着全部與事件有關的信息。包括致使事件的元素、事件的類型以及其餘與特定事件相關的信息。

13.3.1 DOM中的事件對象

       兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。不管指定事件處理程序時使用什麼方法（DOM0級或DOM2級），都會傳入event對象。

       event對象包含與建立它的特定事件有關的屬性和方法。

屬性/方法	類型	讀/寫	說明
bubbles	Boolean	只讀	代表事件是否冒泡
cancelable	Boolean	只讀	代表是否能夠取消事件的默認行爲
currentTarget	Element	只讀	其事件處理程序當前正在處理事件的那個元素
defaultPrevented	Boolean	只讀	爲true表示已經調用了preventDefault()（DOM3級事件中新增）
detail	Integer	只讀	與事件相關的細節信息
evnetPhase	Integer	只讀	調用事件處理程序的階段：1表示捕獲階段，2表示「處於目標」，3表示冒泡階段
preventDefault()	Function	只讀	取消事件的默認行爲。若是cancelable是true，則可使用這個方法
stopImmediatePropagation()	Function	只讀	取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程序被調用（DOM3級事件中新增）
stopPropagation()	Function	只讀	取消事件的進一步捕獲或冒泡。若是bubbles爲true，則可使用這個方法
target	Element	只讀	事件的目標
trusted	Boolean	只讀	爲true表示事件是瀏覽器生成的。爲false表示事件是由開發人員經過JavaScript建立的（DOM3級事件中新增）
type	String	只讀	被觸發的事件的類型
view	AbstractView	只讀	與事件關聯的抽象視圖。等同與發生事件的window對象

       在事件處理程序內部，對象this始終等於currentTarget的值，而target則只包含事件的實際目標，若是直接將事件處理程序指定給了目標元素，則this、currentTarget和target包含相同的值。

       要阻止特定事件的默認行爲，可使用preventDefault()方法。

       只有cancleable屬性設置爲true的事件，纔可使用preventDefault()來取消其默認行爲。

       事件對象的eventPhase屬性，能夠用來肯定事件當前正位於事件流的哪一個階段。若是是在捕獲階段調用的事件處理程序，那麼，eventPhase等於1,；若是事件處理程序處於目標對象上，則eventPhase等於2；若是是在冒泡階段調用的事件處理程序，eventPhase等於3。這裏要注意的是，儘管「處於目標」發生在冒泡階段，但eventPhase仍然一直等於2。

13.3.2  IE中的事件對象

       在使用DOM0級方法添加事件處理程序時，event對象做爲window對象的一個屬性存在。若是事件處理程序是使用attachEvent()添加的，那麼就會有一個event對象做爲參數被傳入事件處理程序函數中。

       若是是經過HTML特性指定的事件處理程序，那麼還能夠經過一個名叫evnet的變量來訪問event對象（與DOM中的事件模型相同）。

屬性/方法	類型	讀/寫	說明
cancelBubble	Boolean	讀/寫	默認值爲false，但將其設置爲true就能夠取消事件冒泡（與DOM中的stopPropagation()方法的做用相同）
returnValue	Boolean	讀/寫	默認值爲true，但將其設置爲false就能夠取消事件的默認行爲（與DOM中的preventDefault()方法的做用相同）
srcElement	Element	只讀	事件的目標（與DOM中的target屬性相同）
type	String	只讀	被觸發的事件的類型

13.3.3 跨瀏覽器的事件對象

13.4 事件類型

13.4.1 UI事件

       UI事件指的是那些不必定與與用戶操做有關的事件。這些事件在DOM規範出現以前，都是以這種或那種形式存在的，而在DOM規範中保留是爲了向後兼容。現有的UI事件以下：

（1）DOMActivate：表示元素已經被用戶操做（經過鼠標或鍵盤）激活。這個事件在DOM3級事件中被廢棄，但Firefox2+和Chrome支持它。考慮到不一樣瀏覽器實現的差別，不建議使用這個事件。

（2）load：當頁面徹底加載後在window上面觸發，當全部框架都加載完畢時在框架上面觸發，當圖像都加載完畢時在<img>元素上面觸發，或者當嵌入的內容加載完畢時在<object>元素上面觸發。

（3）unload：當頁面徹底卸載後在window上面觸發，當全部框架都卸載後在框架集上面觸發，或者當嵌入的內容卸載完畢後在<object>元素上面觸發。

（4）abort：當用戶中止下載過程時，若是嵌入的內容沒有加載完，則在<object>元素上面觸發。

（5）error：當發生JavaScript錯誤時在window上面觸發，當沒法加載圖像時在<img>元素上面觸發，當沒法加載嵌入內容時在<object>元素上面觸發，或者當有一或多個框架沒法加載時在框架集上面觸發。

（6）select：當用戶選擇文本框（<input>或<textarea>）中的一或多個字符時觸發。

（7）resize：當窗口或框架的大小變化時在window或框架上面觸發。

（8）scroll：當用戶滾動帶滾動條的元素中的內容時，在該元素上面觸發。<body>元素中包含所加載頁面的滾動條。

       注意：根據「DOM2級事件」規範，應該在document而非window上面觸發load事件。可是，全部瀏覽器都在window上面實現了該事件，以確保向後兼容。

       注意：新圖像元素不必定要從添加到文檔後纔開始下載，只要設置了src屬性就會開始下載。

       與圖像不一樣，只有在設置了<script>元素的src屬性並將該元素添加到文檔後，纔會開始下載JavaScript文件。

       與<script>節點相似，在未指定href屬性並將<link>元素添加到文檔以前也不會開始下載樣式表。

       關於什麼時候會觸發resize事件，不一樣瀏覽器有不一樣的機制。IE、Safari、Chrome和Opra會在瀏覽器窗口變化了1像素時就觸發resize事件，而後隨着變化不斷重複觸發。Firefox則只會在用戶中止調整瀏覽器大小時纔會觸發resize事件。

13.4.2 焦點事件

       焦點事件會在頁面得到或失去焦點時觸發。利用這些事件並與document.hasFocus()方法及document.activeElement屬性配合，能夠知曉用戶在頁面上的行蹤。有一下6個焦點事件。

（1）blur：在元素失去焦點時觸發。這個事件不會冒泡；全部瀏覽器都支持它。

（2）DOMFocusIn：在元素得到焦點時觸發。這個事件與HTML事件focus等價，但它冒泡。只有Opra支持這個事件。DOM3級事件廢棄了DOMFocusIn，選擇了focusin。

（3）DOMFocusOut：在元素失去焦點時觸發。這個事件是HTML事件blur的通用版本。只有Opra支持這個事件。DOM3級事件廢棄了DOMFocusOut，選擇了focusout。

（4）focus：在元素得到焦點時觸發。這個事件不會冒泡；全部瀏覽器都支持它。

（5）focusin：在元素得到焦點時觸發。這個事件與HTML事件focus等價，但它冒泡。支持這個事件的瀏覽器有IE5.5+、Safari5.1+、Opra11.5+和Chrome。

（6）focusout：在元素失去焦點時觸發。這個事件是HTML事件blur的通用版本。支持這個事件的瀏覽器有IE5.5+、Safari5.1+、Opra11.5+和Chrome。

       當焦點從頁面中的一個元素移動到另外一個元素，會依次觸發下列事件：

（1）focusout 在失去焦點的元素上觸發

（2）focusin 在得到焦點的元素上觸發

（3）blur 在失去焦點的元素上觸發

（4）DOMFocusOut 在失去焦點的元素上觸發

（5）focus 在得到焦點的元素上觸發

（6）DOMFocusIn 在得到焦點的元素上觸發

13.4.3 鼠標與滾輪事件

       DOM3級事件中定義了9個鼠標事件，簡介以下。

（1）click：在用戶單機主鼠標按鈕（通常是左邊的按鈕）或者按下回車鍵時觸發。

（2）dblclick：在用戶雙擊主鼠標按鈕（通常是左邊的按鈕）時觸發。

（3）mousedown：在用戶按下了任意鼠標按鈕時觸發。

（4）mouseenter：在鼠標光標從元素外部首次移動到元素範圍以內時觸發。這個事件不冒泡，並且在光標移動到後代元素上不會觸發。

（5）mouseleave：在位於元素上方的鼠標光標移動到元素範圍以外時觸發。這個事件不冒泡，並且在光標移動到後代元素上不會觸發。

（6）mousemove：當鼠標指針在元素內部移動時重複地觸發。

（7）mouseout：在鼠標指針位於一個元素上方，而後用戶將其移入另外一個元素時觸發。又移入的另外一個元素可能位於前一個元素的外部，也多是這個元素的子元素。

（8）mouseover：在鼠標指針位於一個元素外部，而後用戶將其首次移入另外一個元素邊界以內時觸發。

（9）mouseup：在用戶釋放鼠標按鈕時觸發。

1.客戶區座標位置

鼠標事件都是在瀏覽器視口中的特定位置上發生的。這個位置信息保存在事件對象的clientX和clientY屬性中。

2.頁面座標位置

經過客戶區座標可以知道鼠標是在視口中什麼位置發生的，而頁面座標經過事件對象的pageX和pageY屬性，能告訴你事件是在頁面中的什麼位置發生的。換句話說，這兩個屬性表示鼠標光標在頁面中的位置，所以座標是從頁面自己而非視口的左邊和頂邊計算的。

在頁面沒有滾動的狀況下，pageX和pageY的值與clientX和clientY的值相等。

3.屏幕座標位置

鼠標事件發生時，不只有相對於瀏覽器窗口的位置，還有一個相對於整個電腦屏幕的位置。而經過screenX和screenY屬性就能夠肯定鼠標事件發送時鼠標指針相對於整個屏幕的座標信息。

4.修改鍵

雖然鼠標事件主要是使用鼠標來觸發的，但在按下鼠標時鍵盤上的某些鍵的狀態也能夠影響到所要採起的操做。

DOM爲此規定了4個屬性，表示這些修改鍵的狀態：shiftKey、ctrlKey、altkey和metaKey。這些屬性中包含的都是布爾值，若是相應的鍵被按下了，則值爲true，不然爲false。

5.相關元素

6.鼠標按鈕

對於mousedown和mouseup事件來講，在其event對象存在一個button屬性，表示按下或釋放的按鈕。DOM的button屬性可能有以下3個值：0表示主鼠標按鈕，1表示中間的鼠標按鈕（鼠標滾輪按鈕）2表示次鼠標按鈕。

7.更多的事件信息

8.鼠標滾輪事件

與mousewheel事件對應的event對象除包含鼠標的全部標準信息外，還包含一個特殊的wheelDelta屬性。當用戶向前滾動鼠標滾輪時，wheelDelta是120的倍數；當用戶向後滾動鼠標滾輪時，wheelDelta是-120的倍數。

       9.觸摸設備

       10.無障礙性問題

13.3.4 鍵盤與文本事件

       有3個鍵盤事件，簡述以下：

       （1）keydown：當用戶按下鍵盤上的任意鍵時觸發，並且若是按住不放的話，會重複觸發此事件。

       （2）keypress：當用戶按下鍵盤上的字符鍵時觸發，並且若是按住不放的話，會重複觸發此事件。

       （3）keyup：當用戶釋放鍵盤上的鍵時觸發。

       只有一個文本事件：textInput。這個事件是對keypress的補充，用意是在將文本顯示給用戶以前更容易攔截文本。在文本插入文本框以前會觸發textInput事件。

       鍵盤事件與鼠標事件同樣，都支持相同的修改鍵。

       1.鍵碼

       在發生keydown和keyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。

       2.字符編碼

       發生keyprees事件意味着按下的鍵會影響到屏幕中文本的顯示。在全部瀏覽器中，按下可以輸入或刪除字符的鍵都會觸發keypress事件；

       IE九、Firefox、Chrome和Safari的event對象都支持一個charCode的屬性，這個屬性只有在發生keypress事件時才包含值，並且這個值是按下的那個鍵所表明字符的ASCII編碼。此時的keyCode一般等於0或者也可能等於所按鍵的鍵碼。

       3.DOM3級變化

       DOM3級事件中的鍵盤事件，再也不包含charCode屬性，而是包含兩個新屬性：key和char。

       4.textInput事件

       與keypress的不一樣：（1）只有可編輯區域才能觸發textInput（2）只會在用戶按下可以輸入的實際字符的鍵纔會被觸發。

       5.設備中的鍵盤事件

13.4.5 複合事件

       複合事件（composition event）是DOM3級事件中新添加的一類事件，用於處理IME的輸入序列。IME（Input Method Editor，輸入法編輯器）可讓用戶輸入在物理鍵盤上找不到的字符。複合事件就是針對檢測和處理這種輸入而設計的。

       （1）compositionstart：在IME的文本複合系統打開時觸發，表示要開始輸入了。

（2）compositionupdate：在向輸入字段中插入新字符時觸發。

（3）compositionend：在IME的文本複合系統關閉時觸發，表示返回正常鍵盤的輸入狀態。

13.6 變更事件

       DOM2級的變更（mutation）事件能在DOM中的某一部分發生變化時給出提示。變更事件是爲XML或HTML DOM設計的，並不特定於某種語言。DOM2級定義了以下變更事件：

（1）DOMSubtreeModified：在DOM結構中發生的任何變化時觸發。這個事件在其餘任何事件觸發後都會觸發。

（2）DOMNodeInserted：在一個節點做爲子節點被插入到另外一個節點中時觸發。

（3）DOMNodeRemoved：在節點從其父節點中被移除時觸發。

（4）DOMNodeInsertedIntoDocument：在一個節點被直接插入文檔或經過子樹間接插入到文檔以後觸發。這個事件在DOMNodeInserted以後觸發。

（5）DOMNodeRemovedFromDocument：在一個節點被直接從文檔中移除或經過子樹間接從文檔中移除以前觸發。這個事件在DOMNodeRemoved以後觸發。

（6）DOMAttrModified：在特性被修改以後觸發。

（7）DOMCharacterDataModified:在文本節點的值發生變化時觸發。

13.4.7 HTML5事件

       1.contextmenu事件

       2.beforeunload事件

       3.DOMContentLoad事件

       4.readystatechange事件

       支持readystatechange事件的每一個對象都有一個readyState屬性，可能包含下列5個值中的一個。

       （1）uninitialized（未初始化）：對象存在但還沒有初始化。

       （2）loading（正在加載）：對象正在加載數據。

       （3）loaded（加載完畢）：對象加載數據完成。

       （4）interactive（交互）：能夠操做對象了，但尚未徹底加載。

       （5）complete（完成）：對象已經加載完畢。

       這些狀態看起來很直觀，但並不是全部對象都會經歷readyState的這幾個階段。換句話說，若是某個階段不適用某個對象，則該對象徹底可能跳過該階段；並無規定哪一個階段適用於哪一個對象。

       5.pageshow和pagehide事件

       Firefox和Opera有一個特性，名叫「往返緩存」（back-forward cache，或bfcache），能夠在用戶使用瀏覽器的「後退」和「前進」按鈕時加快頁面的轉換速度。這個緩存中不只保存着頁面數據，還保存了DOM和JavaScript的狀態；其實是將整個頁面都保存在了內存裏。若是頁面位於bfcache中，那麼再次打開該頁面時就不會觸發load事件。

       pageshow，這個事件在頁面顯示時觸發，不管該頁面是否來自bfcache。在從新加載的頁面中，pageshow會在load事件觸發後觸發；而對於bfcache中的頁面，pageshow會在頁面狀態徹底恢復的那一刻觸發。另外要注意的是，雖然這個事件的目標是document，但必須將其事件處理程序添加到window。

       除了一般的屬性以外，pageshow事件的event對象還包含一個名爲persisted的布爾值屬性。若是頁面被保存在了bfcache中，則這個屬性的值爲true；不然這個屬性的值爲false。

       pagehide事件會在瀏覽器卸載頁面的時候觸發，並且是在unload事件以前觸發。與pageshow事件同樣，pagehide在document上面觸發，但其事件處理程序必需要添加到window對象。對於pagehide事件，若是頁面在卸載以後會被保存在bfcache中，那麼persisted的值也會被設置爲true。

       指定了onunload事件處理程序的頁面會被自動排除在bfcache以外，即便事件處理程序是空的。緣由在於，onunload最經常使用於撤銷在onload中所執行的操做，而跳過onload後再次顯示頁面極可能就會致使頁面不正常。

6.haschange事件

HTML5新增了haschange事件，以便在URL的參數列表（及URL中「#」號後面的全部字符串）發生變化時通知開發人員。

必需要把haschange事件處理程序添加給window對象，而後URL參數列表只要變化就會調用它。此時的event對象應該額外包含兩個屬性：oldURL和newURL。這兩個屬性分別保存着參數列表變化先後的完整URL。

13.4.8 設備事件

       1.orientationchange事件

       移動Safari的window.orientation屬性中可能包含3個值：0表示肖像模式，90表示向左旋轉的橫向模式（「主屏幕」按鈕在右側），-90表示向右旋轉的橫向模式（「主屏幕」按鈕在左側）。

       只要用戶改變了設備的查看模式，就會觸發orientationchange事件。此時的event對象不包含任何有價值的信息。

       全部的ios設備都支持orientationchange事件和window.orientation屬性。

2.MozOrientation事件

Firefox3.6爲檢測設備的方向引入了一個名爲MozOrientation的新事件。（前綴Moz表示這是特定於瀏覽器開發商的事件，不是標準事件）當設備的加速計檢測到設備方向改變時，就會觸發這個事件。

3.deviceorientation事件

deviceorientation事件的意圖是告訴開發人員設備在空間中朝向哪兒，而不是如何移動。

觸發deviceorientation事件時，事件對象中包含着每一個軸相對於設備靜止狀態下發生變化的信息。事件對象包含如下5個屬性。

（1）alpha：在圍繞z軸旋轉時（即左右旋轉時），y軸的度數差；是一個介於0到360之間的浮點數。

（2）beta：在圍繞x軸旋轉時（即先後旋轉時），z軸的度數差；是一個介於-180到180之間的浮點數。

（3）gamma：圍繞y軸旋轉時（即扭轉設備時），z軸的度數差；是一個介於-90到90之間的浮點數。

（4）absolute：布爾值，表示設備是否返回一個絕對值。

（5）compassCalibrated：布爾值，表示設備的指南針是否校準過。

4.devicemotion事件

devicemotion事件是要告訴開發人員設備何時移動，而不只僅是設備方向如何改變。

觸發devicemotion事件時，事件對象包含如下屬性。

（1）acceleration：一個包含x、y和z屬性的對象，在不考慮重力的狀況下，告訴你在每一個方向上的加速度。

（2）accelerationIncludingGravity：一個包含x、y和z屬性的對象，在考慮z軸天然重力加速度的狀況下，告訴你在每一個方向上的加速度。

（3）interval：以毫秒錶示的時間值，必須在另外一個devicemotion事件觸發前傳入。這個值在每一個事件中應該是一個常量。

（4）rotationRate：一個表示方向的alpha、beta和gamma屬性的對象。

 

13.4.9 觸摸與手勢事件

       1.觸摸事件

       觸摸事件會在用戶手指放在屏幕上面時、在屏幕上滑動時或從屏幕上移開時觸發。具體來講，有如下幾個觸摸事件。

       （1）touchstart：當手指觸摸屏幕時觸發；即便已經有一個手指放在了屏幕上也會觸發。

       （2）touchmove：當手指在屏幕上滑動時連續地觸發。在這個事件發生期間，調用preventDefault()能夠阻止滾動。

       （3）touchend：當手指從屏幕上移開時觸發。

       （4）touchcancel：當系統中止跟蹤觸摸時觸發。關於此事件的確切觸發時間，文檔中沒有明確說明。

       上面這幾個事件都會冒泡，也均可以取消。雖然這些觸摸事件沒有在DOM規範中定義，但它們倒是以兼容DOM的方式實現的。所以，每一個觸摸事件的event對象都提供了在鼠標事件中常見的屬性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlkey和metaKey。

       除了常見的DOM屬性外，觸摸事件還包含下列三個用於跟蹤觸摸的屬性。

       （1）touches：表示當前跟蹤的觸摸操做的Touch對象的數組。

       （2）targetTouches：特定於事件目標的Touch對象的數組。

       （3）changeTouches：表示紫上次觸摸以來發生了什麼改變的Touch對象的數組。

       每一個Touch對象包含下列屬性。

       （1）clientX：觸摸目標在視口中的x座標。

       （2）cilentY：觸摸目標在視口中的y座標。

       （3）identifier：標示觸摸的惟一ID。

       （4）pageX：觸摸目標在頁面中的x座標。

       （5）pageY：觸摸目標在頁面中的y座標。

       （6）screenX：觸摸目標在屏幕中的x座標。

       （7）screenY：觸摸目標在屏幕中的y座標。

       （8）target：觸摸的DOM節點目標。

2.手勢事件

iOS2.0中的Safari還引入了一組手勢事件。當兩個手指觸摸屏幕時就會產生手勢，手勢一般會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件，分別介紹以下。

（1）gesturestart：當一個手指以及按在屏幕上而另外一個手指又觸摸屏幕時觸發。

（2）gesturechange:當觸摸屏幕的任何一個手指的位置發生變化時觸發。

（3）gestureend：當任何一個手指從屏幕上面移開時觸發。

只有兩個手指都觸摸到事件的接收容器時纔會觸發這些事件。

觸摸事件和手勢事件之間存在某種關係。當一個手指放在屏幕上時，會觸發touchstart事件。若是另外一個手指又放在了屏幕上，則會先觸發gesturestart事件，隨後觸發基於該手指的touchstart事件。若是一個或兩個手指在屏幕上滑動，將會觸發gesturechange事件。但只要有一個手指移開，就會觸發gesureend事件，緊接着又會觸發基於該手指的touchend事件。

與觸摸事件同樣，每一個手勢事件的event對象都包含着標準的鼠標事件屬性。此外，還包含兩個額外的屬性：rotation和scale。其中，rotation屬性表示手指變化引發的旋轉角度，負值表示逆時針旋轉，正值表示順時針旋轉（該值從0開始）。而scale屬性表示兩個手指間距離的變化狀況（例如向內會縮短距離）；這個值從1開始，並隨距離拉大而增加，隨距離縮短而減少。

13.5 內存和性能

       在JavaScript中，添加到頁面上的事件處理程序數量將直接關係到頁面的總體運行性能。致使這一問題的緣由是多方面的。首先，每一個函數都是對象，都會佔用內存；內存中的對象越多，性能就越差。其次，必須實現指定全部事件處理程序而致使的DOM訪問次數，會延遲整個頁面的交換就緒時間。

13.5.1 事件委託

       對「事件處理程序過多」問題的解決方案就是事件委託。事件委託利用了事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。

       最適合採用事件委託技術的事件包括：click、mousedown、mouseup、keydown、keyup和keypress。

13.5.2 移除事件處理程序

       每當將事件處理程序指定給元素時，運行中的瀏覽器代碼與支持頁面交互的JavaScript代碼之間就會創建一個鏈接。這種鏈接越多，頁面執行起來就越慢。在不須要的時候移除事件處理程序，也是解決這個問題的一種方案。

       注意，在事件處理程序中刪除按鈕也能阻止事件冒泡。目標元素在文檔中是事件冒泡的前提。

       通常來講，最好的作法是在頁面卸載以前，先經過onunload事件處理程序移除全部事件處理程序。

13.6 模擬事件

13.6.1 DOM中的事件模擬

       能夠在document對象上使用createEvent()方法建立event對象。這個方法接收一個參數，即表示要建立的事件類型的字符串。在DOM2級中，全部這些字符串都是用英文複數形式，而在DOM3級中都變成了單數。這個字符串能夠是下列幾個字符串之一。

（1）UIEvents：通常化的UI事件。鼠標事件和鍵盤事件都繼承自UI事件。DOM3級中是UIEvent。

（2）MouseEvents：通常化的鼠標事件。DOM3級中是MouseEvent。

（3）MutationEvents：通常化的DOM變更事件。DOM3級中是MutationEvent。

（4）HTMLEvents：通常化的HTML事件。沒有對應的DOM3級事件（HTML事件被分散到其餘類別中。）

在建立了event對象以後，還須要使用與事件有關的信息對其進行初始化。每種類型的event對象都有一個特殊的方法，爲它傳入適當的數據就能夠初始化該event對象。不一樣類型的這個方法的名字也不相同，具體要取決於createEvent()中使用的參數。

模擬事件的最後一步就是要觸發事件。這一步須要使用dispatchEvent()方法，全部支持事件的DOM節點都支持這個方法。調用dispatchEvent()方法時，須要傳入一個參數，即表示要觸發事件的event對象。觸發事件以後，該事件就躋身「官方事件」之列了，於是可以照樣冒泡並引起相應事件處理程序的執行。

13.6.2 IE中的事件模擬

       在IE8及以前版本中模擬事件與在DOM中模擬事件的思路類似：先建立event對象，而後爲其指定相應的信息，而後再使用該對象來觸發事件。固然，IE在實現每一個步驟時都採用了不同的方式。

       調用document.createEventObject()方法能夠在IE中建立event對象。但與DOM方式不一樣的是，這個方法不接受參數，結果會返回一個通用的event對象。而後，你必須手工爲這個對象添加全部必要的信息（沒有方法來輔助完成這一步驟）。最後一步就是在目標上調用fireEvent()方法，這個方法接受兩個參數：事件處理程序的名稱和event對象。在調用fireEvent()方法時，會自動爲event對象添加srcElement和type屬性；其餘屬性則都是必須經過手工添加的。

13.7 小結

       在使用事件時，須要考慮以下一些內存和性能方面的問題：

（1）有必要限制一個頁面中事件處理程序的數量，數量太多會致使佔用大量內存，並且也會讓用戶感受頁面反應不夠靈敏。

（2）創建在事件冒泡機制之上的事件委託技術，能夠有效減小事件處理程序的數量。

（3）建議在瀏覽器卸載頁面以前移除頁面中的全部事件處理程序

$("#xxx").bind("DOMNodeInserted", function () {
    
});
 

$("#xxx").bind("DOMNodeRemoved", function () {
    
});
//IE瀏覽器不支持
document.addEventListener("DOMNodeInserted",function(){
 
 
},false);
document.removeEventListener("DOMNodeInserted");
 
document.addEventListener("DOMNodeRemoved",function(){
 
},false);
 <script>
        window.onload = function() {
            
            var count = 0,
                insertListener = function(event){
                    console.warn("Another node has been inserted! ", event);
                    if (event.animationName == "nodeInserted") {
                        event.target.textContent = "Element " + count++ + " has been injected!";
                    }
                }

            document.addEventListener("animationstart", insertListener, false); // standard + firefox
            document.addEventListener("MSAnimationStart", insertListener, false); // IE
            document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

            // Insert a new element
            setInterval(function(){
                document.getElementById("parentElement").appendChild(document.createElement("li"))
            }, 2000);
            
        };
    </script>