複習JS事件及DOM

標籤：move   滑鼠事件   bubble   dom   res   事件流   其他   寫法   hand   

[JS中的事件分類] 1、滑鼠事件：       click/dbclick/mousedown/mousemove/mouseout/mouseover/mouseup   2、鍵盤事件       keydown:鍵盤按下去觸發       keypress:鍵盤按下並鬆開的瞬間       keyup:鍵盤抬起時觸發  [注意事項：(瞭解)]       ①執行順序：keydown-keypress-keyup       ②長按時，會迴圈不斷執行keydown-keypress       ③有keydown事件時，不一定有keyup事件(事件觸發過程，滑鼠移開，就不觸發 )       ④keypress只能捕獲字母、數字、符號鍵，不能捕獲功能鍵；keydown/keyup基本可以捕獲所有功能鍵(特殊除外)       ⑤keypress區分大小寫，keydown和keyup不區分       ⑥keydown/keyup區分主鍵盤和小鍵盤，keypress不區分；   [確定鍵盤觸發按鍵]      ①在觸發函數中傳入參數e，代表按鍵事件      ②通過e.keyCode,確定按鍵Ascii碼值，進而確定按鍵；      ③所有瀏覽器系統的寫法(一般不必要)；  var evn=e||event;//取到鍵盤事件 var code=evn.keyCode||evn.which||evn.charCode;//取到按鍵編碼   [JS中的事件流]  1、事件冒泡：當某DOM元素觸發某事件時，會從當前DOM元素開始，逐個觸發其祖先元素的同類型事件，直到DOM根節點； DOM0模型，均為事件冒泡； IE中使用.attachEvent()添加的事件，均為冒泡； 其他瀏覽器，.addEventListener添加的事件，當第三個參數為false時，為冒泡；  2、事件捕獲：當某DOM元素觸發某事件時，會從DOM根節點開始，逐個觸發其祖先元素的同類型事件，直到觸發到當前元素為止； 只有使用.addEventListener添加事件，並設定第三個參數為true時，才進行捕獲；  ↓  當前元素 ↑ ↓  ↑ 冒  父元素   捕 ↓  ↑ 泡 爺爺元素 獲 ↓  ↑  DOM根節點  3、阻斷事件冒泡： IE瀏覽器中：將e.cancelBubble屬性設為true； 其他瀏覽器：調用e.stopPropagation();方法 相容寫法：function myParagraphEventHandler(e) {                                         e = e || window.event;                                              if (e.stopPropagation) {                                                  e.stopPropagation(); //IE以外                                               } else {                                                   e.cancelBubble = true; //IE                                                         }                                              }  3、阻止預設事件： IE瀏覽器中：將e.returnValue屬性設為false； 其他瀏覽器：調用e.preventDefault();方法 相容寫法：function eventHandler(e) {                                         e = e || window.event;                                        // 防止預設行為                                                if (e.preventDefault) {                                        e.preventDefault(); //IE以外                                                 } else {                                        e.returnValue = false; //IE                                                  }                                            }  【DOM樹節點】    DOM節點分為三大類：元素節點、文本節點、屬性節點     文本節點、屬性節點，為元素節點的兩個子節點；     通過getElement系列方法，可以去到元素節點。  【查看節點】     1、getElementById：通過ID擷取唯一的節點；多個同名ID，只會取第一個；     2、getElementsByName：通過Name取到一個數組，包含1到多個節點；使用方式：通過迴圈，取到每一個節點。迴圈次數：從0開始,<數組.length 【查看和設定屬性節點】    1、查看屬性節點： getAttribute("屬性名稱");    2、設定屬性節點： setAttribute("屬性名稱","屬性值");  【JS修改樣式總結】    1、.className : 為元素設定一個新的class名字；    div1.className = "class1";     2、.style : 為元素設定一個新的樣式，注意駝峰命名法；    div1.style.backgroundColor = "red";     3、.style.cssText : 為元素同時修改多個樣式；    div1.style.cssText = "width:100px;height100px;"; 【查看節點】    1、tagName屬性：擷取節點的標籤名；    2、innerHTML:設定或者擷取節點內部的所有HTML代碼；    3、innerText:設定或者擷取節點內部的所有文字； 

複習JS事件及DOM