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

Anshiii 發布于2019-08-22 10:56 / 1047人閱讀

摘要：事件類型布爾值，表示事件是否通過以冒泡形式觸發。表示鍵盤事件的屬性布爾值，表示當前按下的鍵是否表示一個字符。表示當前按鍵的值僅對事件有效。，事件發生時相對于屏幕的坐標。

事件對象

event 對象還包含很多有用的屬性。W3C 范中包含的大部分屬性都列在下面，更多信息參照完整的標準規范。

事件類型：

bubbles ：布爾值，表示事件是否通過DOM 以冒泡形式觸發。

事件發生時，反映當前環境信息的屬性：

button ：表示（如果有）鼠標所按下的按鈕。

ctrlKey ：布爾值，表示Ctrl 鍵是否按下。

altKey ：布爾值，表示Alt 鍵是否按下。

shiftKey ：布爾值，表示Shift 鍵是否按下。

metaKey ：布爾值，表示Meta 鍵是否按下。

表示鍵盤事件的屬性：

isChar ：布爾值，表示當前按下的鍵是否表示一個字符。

charCode ：表示當前按鍵的unicode 值（僅對keypress 事件有效）。

keyCode ：表示非字符按鍵的unicode 值。

which ：表示當前按鍵的unicode 值，不管當前按鍵是否表示一個字符。

事件發生時的環境參數：

pageX，pageY ：事件發生時相對于頁面（如viewport 區域）的坐標。

screenX，screenY ：事件發生時相對于屏幕的坐標。

和事件相關的元素：

currentTarget ：事件冒泡階段所在的當前DOM 元素。

target,originalTrget ：原始的DOM 元素。

relatedTarget ：其他和事件相關的DOM 元素（如果有的話）。

不同的瀏覽器對這些屬性的兼容性也不同，尤其是那些不兼容W3C 的瀏覽器。

事件庫

手動處理眾多瀏覽器的差異性吃力不討好。jQuery 的API 提供了bind()函數用來跨瀏覽器綁定事件監聽。在一個jQuery 實例上調用此函數，傳入事件名稱和回調函數：

jQuery("#element").bind(eventName, handler);

給一個元素注冊點擊事件：

jQuery("#element").bind("click", function(event) {
    // ...
});

jQuery 提供了一些常用事件的快捷方法，比如click、submit 和mouseover：

$("#myDiv").click(function(){
// ...
});

注意: 使用這個方法之前要確保DOM 元素是存在的。例如，應當在頁面載入完成后綁定事件，因此需要綁定window 的load 事件，然后添加監聽：

jQuery(window).bind("load", function() {
    $("#signinForm").submit(checkForm);
});

比監聽window 的load 事件更好的方法，即DOMContentLoaded。當DOM 構建完成時觸發這個事件，這時圖片和樣式表可能還未加載完畢。這也就是說這個事件一定會在用戶和頁面產生交互之前觸發。并不是所有的瀏覽器都支持DOMContentLoaded，因此jQuery 將它融入了ready() 函數，這個函數是兼容各個瀏覽器的：

jQuery.ready(function($)){
    $("#myForm"). bind("submit", function(){ /*...*/});
});

實際上，可以不用ready() 函數而直接將回調函數寫入jQuery 對象。

jQuery(function($){
    // 當頁面內容可用時調用
});

切換上下文

關于事件有一點經常讓人感到迷惑就是調用事件回調函數時上下文的切換。當使用瀏覽器內置的addEventListener() 時，上下文從局部變量切換為目標HTML 元素：

new function(){
    this.appName = "wem";

    document.body.addEventListener("click", function(e){
        // 上下文發生改變，因此appName 是undefined
        alert(this.appName);
    }, false);
};

要想保持原有的上下文，需要將回調函數包裝進一個匿名函數，然后定義一個引用指向它。即使用代理函數來保持當前的上下文。這在jQuery 中也是一種很常用的模式，包括一個proxy() 函數，只需將指定的上下文傳入函數即可：

$("signinForm").submit($.proxy(function(){ /* ... */ }, this));

自定義事件

除了瀏覽器內置的事件之外，也可以觸發和綁定自定義事件。這是架構庫的一個好方法——也是jQuery 的大多數插件所使用的模式。大多數瀏覽器廠商均未實現W3C 標準中的自定義事件，可以使用諸如jQuery 或Prototype 的類庫來使用這個特性。jQuery 中可以使用trigger() 函數來觸發自定義事件。可以通過命名空間的形式來管理事件名稱，命名空間中的單詞用點號分隔，比如：

// 綁定自定義事件
$(".class").bind("refresh.widget",function(){});

// 觸發自定義事件
$(".class").trigger("refresh.widget");

通過給trigger() 傳入一個額外的參數來給事件處理程序傳入數據。數據會以附加參數的形式帶入回調：

$(".class").bind("frob.widget", function(event, dataNumber){
    console.log(dataNumber);
}); 

$(".class").trigger("frob.widget", 5);

和內置事件一樣，自定義事件同樣會沿著DOM 樹做冒泡。

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

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

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

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

摘要：事件是應用程序的核心，是所有內容的驅動。將對這兩種事件模型的支持都加入標準規范之中。根據型，事件首先被目標元素所捕捉，然后向上冒泡。取消事件冒泡當事件冒泡時，可以通過數來終止冒泡，這個函數是對象中的方法。事件是 JavaScript 應用程序的核心，是所有內容的驅動。盡管后來W3C 對此做了標準化，但 IE 仍然堅持使用與 W3C 不兼容的事件模型，直到 IE9 才遵循標準。有很多諸...

Julylovin 2019-08-21 10:26 評論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
淺析 web 前端 MVVM

摘要：它由微軟架構師和開發，通過利用微軟圖形系統和的互聯網應用派生品的特性來簡化用戶界面的事件驅動程序設計。微軟的和架構師之一于年在他的博客上發表了。更改時會得到提醒這個情況是一個單向流。前言記得四個月前有一次面試，面試官問我 MVVM 是什么，MVVM 的本質是什么。我大腦一片混亂，那時我對 MVVM 的認知就只是雙向綁定和Vue，以這個關鍵字簡單回答了幾句，我反問 MVVM 的本質是...

VincentFF 2019-08-23 14:35 評論0 收藏0