標籤：
一、 事件流
1. 事件流描述的是從頁面中接收事件的順序
2. 事件冒泡（event bubble）：事件從開始時由最具體的元素（就是嵌套最深的那個節點）開始，逐級向上傳播到較為不具體的節點（就是Document）
<!doctype html> <html> <head> <title>事件冒泡</title> </head> <body> <div id = ‘myDiv‘> 點擊這裡 </div> </body> </html> /* 如果點擊了div元素，那麼這個click事件會按如下順序傳播 1. <div> 2. <body> 3. <html> 4. document click事件首先在div元素上發生，也就是我們點擊的元素，然後body元素髮生點擊事件……一層一層往上冒 */
3. 事件捕獲：不太具體的節點（Document根節點）更早接收到事件，最具體的節點最後接收到事件，剛好與冒泡相反
4. DOM事件流三階段：
1. 事件捕獲階段：首先發生，為截獲事件提供機會
2. 處於目標階段：事件在此觸發
3. 事件冒泡階段：在這個階段對事件作出相應
4. 跨瀏覽器的事件處理函數【可複用，最好手寫】：
var EventUtil = { addHandler:function(element , type , handler){ if(element.addEventListener){ element.addEventListener(type , handler ,false); } else if(element.attachEvent){ element.attachEvent(‘on‘+type , handler); } else{ element[‘on‘+type] = handler; } } removeHandler:function(element , type , handler){ if(element.removeEventListener){ element.removeEventListener(type , handler ,false); } else if(element.detachEvent){ element.detachEvent(‘on‘+type , handler); } else{ element[‘on‘+type] = Null; } } getEvent:function(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; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } };
5. 事件處理常式：響應某個事件的處理函數就是事件處理函數
1. 常用的兩個方法：用於處理指定和刪除事件處理函數的操作方法：addEventListener()/removeEventListener()
2. 這兩個方法接受3個參數：（事件名，處理函數，[,布爾值]）。布爾值預設為false，表示在冒泡階段呼叫事件處理函數，true表示在捕獲階段呼叫事件處理函數
btn.addEventListener(‘click‘ , function(){} , false) //可添加多個事件處理函數 //移除↓ btn.removeEventListener(‘click‘ , handler [, false])//移除的事件處理函數不能是匿名函數
6. 事件對象：在觸發DOM的某個事件時，會產生一個事件對象：event，這個對象包含著所有的事件資訊
1. currentTarget:綁定事件處理函數的那個目標。在事件處理常式內部，this始終等於currentTarget的值
2. target:事件被觸發的那個目標
3. type：事件的類型：是click，還是mouseover……當需要一個函數處理多種事件時可以：
var handler = function(event){ switch(event.type){ case ‘click‘: function(){} break; case ‘mouseover‘: function(){} break; case ‘mouseout‘: function(){} break; } } btn.onclick = handler; btn.mouseover = handler; btn.mouseout = handler;
4. 阻止事件的預設行為，使用preventDefault()方法，只有cancelable屬性為true的事件，才能用此方法阻止
5. stopPropagation():停止事件傳播，取消以後事件的捕獲和冒泡
6. stopImmediatePropagation() 的功能比stopPropagation 多一些，除了可以阻止事件冒泡之外，還可以把這個元素繫結的同類型事件函數也阻止了。
7. 主要的事件類型：
1. UI事件：使用者與頁面元素互動時觸發
1. load事件：頁面完全載入後（包括所有映像、js、css等外部資源）觸發。映像上也可以觸發本事件
2. unload事件：只要使用者從一個頁面切換到另一個頁面（重新載入頁面、點擊某個離開頁面的連結等）就會發生unload事件
3. resize事件：瀏覽器視窗寬高變動（包括最大化最小化）
4. scroll事件
2. 焦時間點事件：（最常用的）
1. focus
2. blur
3. 滑鼠事件
1. click
2. dbclick
3. mousemove
4. mouseenter
5. …………
6. event.clientX/Y:事件發生時，滑鼠指標位置在**客戶區**的座標
7. event.pageX/Y:事件發生時，滑鼠指標位置在**頁面中**的座標
8. event。screenX/Y:事件發生時，滑鼠指標位置在**整個電腦螢幕**的座標
4. 滾輪事件
1. mousewheel()
5. 文本事件
1. textInput():使用者在可編輯區輸入字元觸發
6. 鍵盤事件
1. keydown():按下鍵盤任意鍵觸發，按住不放重複觸發
2. keypress()：按下鍵盤字元鍵觸發，按住不放重複觸發
3. keyup():釋放按鍵時觸發
7. 合成事件：基本無用
8. 變動事件：
9. 裝置事件：
1. orientationchange事件
2. devicemotion事件：裝置移動
3. 觸摸與手勢事件
1. touchstart
2. touchmove
3. touchend：手指從螢幕移開時觸發
4. gesturestart：一個手指按在螢幕上，另一個手指觸控螢幕幕時觸發
5. gesturechange：
6. gestureend:手指從螢幕上移開
8. 事件代理【重點】：
1. 事件處理函數過多，效能勢必下降，解決方案就是事件委託（代理）
2. 事件代理利用了事件冒泡原理，只指定一個事件處理常式，用來管理所有類型的所有事件。比如：可以為整個頁面指定一個click事件處理函數，而不用給每個需要單擊的元素分別添加事件處理函數
<ul> <li id = ‘li1‘></li> <li id = ‘li2‘></li> <li id = ‘li3‘></li> </ul> //為每個li元素都添加一個事件處理函數，太麻煩。只需要給DOM樹中盡量最高層添加事件處理函數 EventUtil.addHandler(ul , ‘click‘ ,handler); function handler(event){ switch(event.target.id){ case ‘li1‘: function(){}; break; case ‘li2‘: function(){}; break; case ‘li3‘: function(){}; break; } } ------------------解析------------------ /* 1. 用事件委託只為ul元素添加了一個click事件，由於所有的li元素都是ul的子節點，在li上的事件會往上冒泡，最終會冒到ul上，觸發在ul上綁定的事件處理函數。 2. 因為只為一個DOM元素，添加了一個事件處理函數，佔用記憶體更小，速度更快 3. 如果可行的話，可以考慮為Document添加一個事件處理函數，優點如下： 1. Document對象訪問很快，可以在頁面生命週期的任何時間為它添加事件處理函數 2. 在頁面中設定事件處理函數所需的時間更少，對DOM的引用更少 3. 最適合採用的事件包括：click、mousedown/up、keydown/up/press */
事件——《JS進階程式設計》
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
