n) 耦合 white 最大 時間 消失 ole 生成 依次

  1 國慶過完了 雖然系統的學習了BOM, DOM, DOM擴展，DOM2, DOM3的相關內容  但是為國慶制定的學習計劃卻未能完成 還是太懶了！
  2 今天來看看 js的事件流， 事件處理程序， 事件對象吧。
  3 
  4 一：事件流
  5 
  6     在 javascript 中 什麽是事件流?
  7     其實也就是 事件傳播的過程和階段， 事件流 總共有3個階段 
  8     1. 事件捕獲階段。
  9     2. 目標元素階段。
 10     3. 事件冒泡階段。
 11 
 12     這三個階段的 順序和過程也是按上面的 1，2，3的順序傳播事件的。
 
 13 
 14     首先來說事件捕獲， 舉個例子：
 15 
 16     var oBtn = document.getElementById("btn");
 17     oBtn.onclick = function () {
 18         alert("1");
 19     };
 20 
 21     我們為頁面上 一個按鈕元素 綁定一個事件處理程序，當我們點擊這個按鈕的時候，
 22     首先 接收到這個消息的是 window對象。 如果這時候 window對象上 也綁定了onclick事件，
 23     那麽就會觸發 window對象上的onclick屬性所保存的事件處理函數.
 
 24     如果沒有 則事件就會傳遞向document對象. 
 25     同理 如果document對象上也綁定了onclick事件，那麽事件也會被觸發.
 26     然後 事件依次向下傳遞給
 27     html,
 28     body,
 29     div...
 30     目標元素。
 31     直到事件傳遞到目標元素的父元素的時候 事件捕獲階段 就算完成了 。
 32 
 33     然後 當事件傳遞到達目標元素的時候 這就是第二個階段 目標元素階段了（雖然也屬於事件冒泡的一部分）
 34     這時候就會觸發 我們綁定到目標元素上面的事件處理函數了 
 
 35 
 36     最後一個階段 就是事件冒泡階段：
 37     也就是 事件離開目標元素 順著事件捕獲時候的路 依次返回的階段 就是事件冒泡階段 。
 38     事件最終也是會冒泡到window對象上才會停止。
 39 
 40     以上就是我們說的 整個事件流的過程 。 
 41 
 42 二: 事件處理程序
 43 
 44     js 的事件處理程序了有三種綁定事件處理程序的方法
 45 
 46     1.為html元素特性賦值一個事件處理函數。
 47     2.DOM0級綁定事件處理函數的方式。
 48     3.DOM2級綁定事件處理程序的方式。
 49 
 50     我們先來看看第一種 為html元素 添加事件處理程序
 51 
 52     function show() {
 53         alert("1")
 54     }
 55     <button id="btn" onclick="show()"></button>
 56 
 57     這種綁定事件的好處 暫時沒想到，
 58     壞處了 倒是有幾點：
 59     1.違背w3c的標準 結構， 樣式， 行為沒有做到完全分離。
 60     2.可閱讀 和 可維護性差，緊密耦合。
 61 
 62     第二種是DOM級的綁定方式 
 63 
 64     var oBtn = document.getElementById("btn");
 65     oBtn.onclick = function () {
 66         alert("1");
 67     };
 68 
 69     為DOM元素的屬性直接綁定 事件處理函數
 70     這種綁定事件的方式優缺點如下：
 71     1.結構 與 行為分離， 可閱讀，可維護，低耦合。
 72     2.事件處理函數的作用域就是 DOM元素的作用域 很容易訪問當前 DOM元素的其它屬性什麽的。
 73     3.缺點就是 只能為同類型的事件綁定一個事件處理函數。
 74 
 75     第三種是 DOM2級綁定事件的方式
 76 
 77     以IE9+的主流瀏覽器支持:
 78     addEventListener,
 79     removeEvenetListen.
 80 
 81     IE6,IE7,IE8支持
 82     attachEvent,
 83     detachEvent.
 84 
 85     以下是 綁定事件處理程序的跨瀏覽器兼容寫法
 86 
 87     var addEvent = (function () { 
 88         if (document.addEventListener) { 
 89             return function (el, type, fn) { 
 90                 el.addEventListener(type, fn, false); 
 91             }
 92         } else { 
 93             return function (el, type, fn) { 
 94                 el.attachEvent(‘on‘ + type, function () { 
 95                     return fn.call(el, window.event); 
 96                 }); 
 97             } 
 98         } 
 99     })();
100 
101     這裏其實有個地方值得我們思考
102     也就是
103     el.addEventListener(type, fn, false);的第三個參數
104     這個第三個參數為false的時候 表示事件只在冒泡階段可以觸發 在捕獲階段 不觸發。一般也是false
105     因為 在冒泡階段觸發事件 可以做到最大的瀏覽器兼容性。
106     還有就是 如果設置為了 true那麽 有可能會在捕獲階段 觸發目標元素的事件處程序 那樣的話 目標元素的事件處理程序有可能被觸發兩次。（書上是這麽說的 我也沒有實踐過！！！）。
107 
108 
109     為什麽 attachEvent綁定事件的時候 不用傳入第三個參數了？？？
110     因為 attachEvent是針對 IE6,ie7,ie8瀏覽器的 它們只支持 事件冒泡 不支持 事件捕獲。
111 
112     以上綁定事件處理程序 也以相同的方法 刪除已經綁定的事件處理程序，不過在刪除的時候 只能刪除指定的事件處理函數，
113     刪除匿名事件處理函數是沒有用的 根本不是一個對象。
114     var removeEvent = function( obj, type, fn ) {
115         if (obj.removeEventListener)
116             obj.removeEventListener( type, fn, false );
117         else if (obj.detachEvent) {
118             obj.detachEvent( "on"+type, obj["e"+type+fn] );
119             obj["e"+type+fn] = null;
120         }
121     }; 
122 
123 三: 事件對象
124 
125     事件對象 分為 DOM事件對象 和 IE事件對象
126     事件對象 只在事件處理函數執行的時候存在 函數執行完畢 事件對象就消失。 
127     事件對象 在事件處理函數被執行的時候 作為第一個參數被傳入事件處理函數中，IE6，7，8的事件對象 被掛在到了window對象上
128     直接在window對象上取
129 
130     DOM事件對象有以下屬性
131 
132     bubbles                返回布爾值，指示事件是否是起泡事件類型。
133     cancelable            返回布爾值，指示事件是否可擁可取消的默認動作。
134     currentTarget        返回其事件監聽器觸發該事件的元素。
135     eventPhase            返回事件傳播的當前階段。
136     target                返回觸發此事件的元素（事件的目標節點）。
137     timeStamp            返回事件生成的日期和時間。
138     type                返回當前 Event 對象表示的事件的名稱。
139     initEvent()         初始化新創建的 Event 對象的屬性。
140     preventDefault()    通知瀏覽器不要執行與事件關聯的默認動作。
141     stopPropagation()    不再派發事件。
142 
143 
144 
145     IE的事件對象包括下面這些屬性 
146 
147     cancelBubble        如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設為 true。
148     fromElement            對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
149     keyCode                對於 keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對於 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。
150     offsetX,offsetY        發生事件的地點在事件源元素的坐標系統中的 x 坐標和 y 坐標。
151     returnValue            如果設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置為 fasle，可以取消發生事件的源元素的默認動作。
152     srcElement            對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。
153     toElement            對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
154     x,y                    事件發生的位置的 x 坐標和 y 坐標，它們相對於用CSS動態定位的最內層包容元素。
155 
156     各自大多數 都有對應的屬性 就不一一列舉了。
157 
158     阻止事件冒泡 和 默認事件：
159 
160     var  stopEvent = function(e){
161       e = e || window.event;
162       if(e.preventDefault) {
163         e.preventDefault();
164         e.stopPropagation();
165       }else{
166         e.returnValue = false;
167         e.cancelBubble = true;
168       }
169     },
170 
171     
172 
173     在通過DOM2級事件綁定事件的時候 為同一個事件類型 綁定多個事件處理函數的時候 
174 
175     DOM2級標準的 事件執行順序是按照綁定事件的順序 依次執行 
176     而 IE6，7，8的 執行順序剛好相反
177 
178     但是 事件對象有個屬性 可以阻止別的同類型事件處理函數的觸發 而讓本身先觸發 這就是事件優先級
179     stopImmediatePropagation屬性就有這個作用。
180 
181     最後是自定義事件的寫法：
182 
183     var eve = new Event("custome");
184     element.addEventListener("custome", function(){
185         console.log("custome");
186     })
187 
188     element.dispatchEvent(eve);
189 
190 
191 
192     繼續努力 今晚就到這裏吧 晚安 布丁-啊————————————————————————

國慶過完了 雖然系統的學習了BOM, DOM, DOM擴展，DOM2, DOM3的相關內容 但是為國慶制定的學習計劃卻未能完成 還是太懶了！ 今天來看看 js的事件流， 事件處理程序， 事件對象吧。
一：事件流
在 javascript 中 什麽是事件流? 其實也就是 事件傳播的過程和階段， 事件流 總共有3個階段 1. 事件捕獲階段。 2. 目標元素階段。 3. 事件冒泡階段。
這三個階段的 順序和過程也是按上面的 1，2，3的順序傳播事件的。
首先來說事件捕獲， 舉個例子：
var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert("1"); };
我們為頁面上 一個按鈕元素 綁定一個事件處理程序，當我們點擊這個按鈕的時候， 首先 接收到這個消息的是 window對象。 如果這時候 window對象上 也綁定了onclick事件， 那麽就會觸發 window對象上的onclick屬性所保存的事件處理函數. 如果沒有 則事件就會傳遞向document對象. 同理 如果document對象上也綁定了onclick事件，那麽事件也會被觸發. 然後 事件依次向下傳遞給 html, body, div... 目標元素。 直到事件傳遞到目標元素的父元素的時候 事件捕獲階段 就算完成了 。
然後 當事件傳遞到達目標元素的時候 這就是第二個階段 目標元素階段了（雖然也屬於事件冒泡的一部分） 這時候就會觸發 我們綁定到目標元素上面的事件處理函數了
最後一個階段 就是事件冒泡階段： 也就是 事件離開目標元素 順著事件捕獲時候的路 依次返回的階段 就是事件冒泡階段 。 事件最終也是會冒泡到window對象上才會停止。
以上就是我們說的 整個事件流的過程 。
二: 事件處理程序
js 的事件處理程序了有三種綁定事件處理程序的方法
1.為html元素特性賦值一個事件處理函數。 2.DOM0級綁定事件處理函數的方式。 3.DOM2級綁定事件處理程序的方式。
我們先來看看第一種 為html元素 添加事件處理程序
function show() { alert("1") } <button id="btn" onclick="show()"></button>
這種綁定事件的好處 暫時沒想到， 壞處了 倒是有幾點： 1.違背w3c的標準 結構， 樣式， 行為沒有做到完全分離。 2.可閱讀 和 可維護性差，緊密耦合。
第二種是DOM級的綁定方式
var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert("1"); };
為DOM元素的屬性直接綁定 事件處理函數 這種綁定事件的方式優缺點如下： 1.結構 與 行為分離， 可閱讀，可維護，低耦合。 2.事件處理函數的作用域就是 DOM元素的作用域 很容易訪問當前 DOM元素的其它屬性什麽的。 3.缺點就是 只能為同類型的事件綁定一個事件處理函數。
第三種是 DOM2級綁定事件的方式
以IE9+的主流瀏覽器支持: addEventListener, removeEvenetListen.
IE6,IE7,IE8支持 attachEvent, detachEvent.
以下是 綁定事件處理程序的跨瀏覽器兼容寫法
var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); } } else { return function (el, type, fn) { el.attachEvent(‘on‘ + type, function () { return fn.call(el, window.event); }); } } })();
這裏其實有個地方值得我們思考 也就是 el.addEventListener(type, fn, false);的第三個參數 這個第三個參數為false的時候 表示事件只在冒泡階段可以觸發 在捕獲階段 不觸發。一般也是false 因為 在冒泡階段觸發事件 可以做到最大的瀏覽器兼容性。 還有就是 如果設置為了 true那麽 有可能會在捕獲階段 觸發目標元素的事件處程序 那樣的話 目標元素的事件處理程序有可能被觸發兩次。（書上是這麽說的 我也沒有實踐過！！！）。

為什麽 attachEvent綁定事件的時候 不用傳入第三個參數了？？？ 因為 attachEvent是針對 IE6,ie7,ie8瀏覽器的 它們只支持 事件冒泡 不支持 事件捕獲。
以上綁定事件處理程序 也以相同的方法 刪除已經綁定的事件處理程序，不過在刪除的時候 只能刪除指定的事件處理函數， 刪除匿名事件處理函數是沒有用的 根本不是一個對象。 var removeEvent = function( obj, type, fn ) { if (obj.removeEventListener) obj.removeEventListener( type, fn, false ); else if (obj.detachEvent) { obj.detachEvent( "on"+type, obj["e"+type+fn] ); obj["e"+type+fn] = null; } };
三: 事件對象
事件對象 分為 DOM事件對象 和 IE事件對象 事件對象 只在事件處理函數執行的時候存在 函數執行完畢 事件對象就消失。 事件對象 在事件處理函數被執行的時候 作為第一個參數被傳入事件處理函數中，IE6，7，8的事件對象 被掛在到了window對象上 直接在window對象上取
DOM事件對象有以下屬性
bubbles 返回布爾值，指示事件是否是起泡事件類型。 cancelable 返回布爾值，指示事件是否可擁可取消的默認動作。 currentTarget 返回其事件監聽器觸發該事件的元素。 eventPhase 返回事件傳播的當前階段。 target 返回觸發此事件的元素（事件的目標節點）。 timeStamp 返回事件生成的日期和時間。 type 返回當前 Event 對象表示的事件的名稱。 initEvent() 初始化新創建的 Event 對象的屬性。 preventDefault() 通知瀏覽器不要執行與事件關聯的默認動作。 stopPropagation() 不再派發事件。


IE的事件對象包括下面這些屬性
cancelBubble 如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設為 true。 fromElement 對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。 keyCode 對於 keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對於 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。 offsetX,offsetY 發生事件的地點在事件源元素的坐標系統中的 x 坐標和 y 坐標。 returnValue 如果設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置為 fasle，可以取消發生事件的源元素的默認動作。 srcElement 對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。 toElement 對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。 x,y 事件發生的位置的 x 坐標和 y 坐標，它們相對於用CSS動態定位的最內層包容元素。
各自大多數 都有對應的屬性 就不一一列舉了。
阻止事件冒泡 和 默認事件：
var stopEvent = function(e){ e = e || window.event; if(e.preventDefault) { e.preventDefault(); e.stopPropagation(); }else{ e.returnValue = false; e.cancelBubble = true; } },

在通過DOM2級事件綁定事件的時候 為同一個事件類型 綁定多個事件處理函數的時候
DOM2級標準的 事件執行順序是按照綁定事件的順序 依次執行 而 IE6，7，8的 執行順序剛好相反
但是 事件對象有個屬性 可以阻止別的同類型事件處理函數的觸發 而讓本身先觸發 這就是事件優先級 stopImmediatePropagation屬性就有這個作用。
最後是自定義事件的寫法：
var eve = new Event("custome"); element.addEventListener("custome", function(){ console.log("custome"); })
element.dispatchEvent(eve);


繼續努力 今晚就到這裏吧 晚安 布丁-啊————————————————————————

javascript事件學習筆記