JavaScript MVC 學習筆記（五）事件的基本操作

Julylovin 發布于2019-08-21 10:26 / 2009人閱讀

摘要：事件是應用程序的核心，是所有內容的驅動。將對這兩種事件模型的支持都加入標準規范之中。根據型，事件首先被目標元素所捕捉，然后向上冒泡。取消事件冒泡當事件冒泡時，可以通過數來終止冒泡，這個函數是對象中的方法。

事件是 JavaScript 應用程序的核心，是所有內容的驅動。盡管后來W3C 對此做了標準化，但 IE 仍然堅持使用與 W3C 不兼容的事件模型，直到 IE9 才遵循標準。有很多諸如 jQuery 和 Prototye 的類庫很好地處理了兼容性問題，對外提供了統一的 API 來實現事件。

監聽事件

綁定事件監聽的函數是addEventListener()，有 3 個參數：type（比如click），listener（比如callback）及seCapture。使用前兩個參數可以給一個 DOM 元素綁定一個函數，當特定的事件（比如點擊）被觸發時執行這個函數：

var button = document.getElementById("createButton");
button.addEventListener("click", function(){ /* ... */ }, false);

可以使用removeEventListener() 來移除事件監聽，參數和傳入addEventListener() 的一樣。如果監聽的函數是匿名函數，沒有任何引用指向它，在不銷毀這個元素的前提下，這個監聽是無法被移除的：

var div = document.getElementById("div");
var listener = function(event) { /* ... */ };
div.addEventListener("click", listener, false);
div.removeEventListener("click", listener, false);

帶入listener函數的第 1 個參數是event對象，通過event象可以得到事件的相關信息，比如時間戳、坐標和事件宿主元素（target）。它同樣包含很多方法來停止事件冒泡和阻止事件的默認行為。

不同的瀏覽器對事件類型的支持有些差異，但所有現代瀏覽器都支持這些事件：

click

dblclick

mousemove

mouseover

mouseout

focus

blur

change （表單輸入框特有）

submit （表單特有）

事件順序

如果一個節點和它的一個父節點都綁定了相同事件類型的回調，當事件觸發時哪個回調會先執行？

瀏覽器不同有不同的默認執行順序，分為兩種：

事件捕捉（capturing），從頂層的父節點開始觸發事件，從外到內傳播。

事件冒泡（bubbling），從最內層的節點開始觸發事件，逐級冒泡直到頂層節點，從內向外傳播。

W3C將對這兩種事件模型的支持都加入標準規范之中。根據W3C型，事件首先被目標元素所捕捉，然后向上冒泡。

可以自行選擇要注冊的事件處理程序的調用類型，捕捉或冒泡，通過給addEventListener()傳入第3個參數useCapture 來設置。如果addEventListener() 的最后一個參數是true，事件處理程序以捕捉模式觸發；如果是false，事件處理程序以冒泡模式觸發：

// 給最后一個參數傳入false，來設置事件冒泡
button.addEventListener("click", function(){ /* ... */ }, false);

大多數情況下是使用冒泡模式，如果對此不太確定，可以給addEventListener()`的最后一個參數傳入false。

取消事件冒泡

當事件冒泡時，可以通過stopPropagation()數來終止冒泡，這個函數是event對象中的方法。比如這段代碼，任何父節點的事件回調都不會觸發：

button.addEventListener("click", function(e){
    e.stopPropagation();
    /* ... */
}, false);

jQuery 還支持stopImmediatePropagation()函數，用來阻止后續所有的事件觸發——哪怕這些事件是注冊在同一個節點元素上的。

阻止瀏覽器的默認行為

瀏覽器給事件賦予了默認行為。比如，點擊一個鏈接時，瀏覽器的默認行為是載入新頁面，當點擊一個復選框時，瀏覽器會將其選中（或取消選中）。在事件傳播階段（之后）會觸發這些默認行為，在任何一個事件處理程序中都可以阻止默認行為。可以通過調用event對象的preventDefault()函數來阻止默認行為，也可以通過在回調中返回false來實現同樣的效果：

bform.addEventListener("submit", function(e){
    /* ... */
    return confirm("Are you super sure?");
}, false);

如果調用confirm()返回false（用戶點擊了對話框的取消按鈕），這個事件回調函數就返回false，這樣就會取消事件，阻止表單的提交。

（公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85526.html

JavaScript MVC 學習筆記（五）事件操作的拓展

摘要：事件類型布爾值，表示事件是否通過以冒泡形式觸發。表示鍵盤事件的屬性布爾值，表示當前按下的鍵是否表示一個字符。表示當前按鍵的值僅對事件有效。，事件發生時相對于屏幕的坐標。事件對象 event 對象還包含很多有用的屬性。W3C 范中包含的大部分屬性都列在下面，更多信息參照完整的標準規范。事件類型： bubbles ：布爾值，表示事件是否通過DOM 以冒泡形式觸發。事件發生時...

Anshiii 2019-08-22 10:56 評論0 收藏0
JavaScript MVC 學習筆記（一）初識JS MVC

摘要：以基于的富應用開發為主要學習資料。下面用實現一個例子使用匿名函數來封裝一個作用域在頁面加載時綁定事件監聽上面的代碼創建了控制器，這個控制器是放在變量下的命名空間。然后用了一個匿名函數封裝了一個作用域，以避免對全局作用域造成污染。公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。什么是MVC MVC 是一種設...

xorpay 2019-08-22 10:55 評論0 收藏0
Backbone.js學習筆記（一）

摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0
JavaScript MVC 學習筆記（三）類的使用（中）

摘要：實際上，可以將其理解為某種形式的繼承。如果上下文是，則使用全局對象代替。例如的第個參數是上下文，后續是實際傳入的參數序列中允許更換上下文是為了共享狀態，尤其是在事件回調中。公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。接上一篇類的學習，發現實在是看暈了，有些例子是能看懂在干嘛，但是不知道為什么這樣做，有的甚至...

DandJ 2019-08-22 10:56 評論0 收藏0
JavaScript MVC 學習筆記（四）類的使用(下)

摘要：基于函數進行調用的，用來確保函數是在指定的值所在的上下文中調用的。添加私有函數目前上面為類庫添加的屬性都是公開的，可以被隨時修改。以基于的富應用開發為主要學習資料。控制類庫的作用域在類和實例中都添加proxy函數，可以在事件處理程序之外處理函數的時候保持類的作用域。下面是不用proxy的辦法： var Class = function(parent){ var klas...

Rango 2019-08-21 10:25 評論0 收藏0