成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript MVC 學(xué)習(xí)筆記（五）事件的基本操作

Julylovin / 2012人閱讀

摘要：事件是應(yīng)用程序的核心，是所有內(nèi)容的驅(qū)動。將對這兩種事件模型的支持都加入標(biāo)準(zhǔn)規(guī)范之中。根據(jù)型，事件首先被目標(biāo)元素所捕捉，然后向上冒泡。取消事件冒泡當(dāng)事件冒泡時，可以通過數(shù)來終止冒泡，這個函數(shù)是對象中的方法。

事件是 JavaScript 應(yīng)用程序的核心，是所有內(nèi)容的驅(qū)動。盡管后來W3C 對此做了標(biāo)準(zhǔn)化，但 IE 仍然堅持使用與 W3C 不兼容的事件模型，直到 IE9 才遵循標(biāo)準(zhǔn)。有很多諸如 jQuery 和 Prototye 的類庫很好地處理了兼容性問題，對外提供了統(tǒng)一的 API 來實現(xiàn)事件。

監(jiān)聽事件

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

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

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

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

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

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

click

dblclick

mousemove

mouseover

mouseout

focus

blur

change （表單輸入框特有）

submit （表單特有）

事件順序

如果一個節(jié)點和它的一個父節(jié)點都綁定了相同事件類型的回調(diào)，當(dāng)事件觸發(fā)時哪個回調(diào)會先執(zhí)行？

瀏覽器不同有不同的默認(rèn)執(zhí)行順序，分為兩種：

事件捕捉（capturing），從頂層的父節(jié)點開始觸發(fā)事件，從外到內(nèi)傳播。

事件冒泡（bubbling），從最內(nèi)層的節(jié)點開始觸發(fā)事件，逐級冒泡直到頂層節(jié)點，從內(nèi)向外傳播。

W3C將對這兩種事件模型的支持都加入標(biāo)準(zhǔn)規(guī)范之中。根據(jù)W3C型，事件首先被目標(biāo)元素所捕捉，然后向上冒泡。

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

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

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

取消事件冒泡

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

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

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

阻止瀏覽器的默認(rèn)行為

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

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

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

（公開記錄學(xué)習(xí)JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應(yīng)用開發(fā)》為主要學(xué)習(xí)資料。）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85526.html

相關(guān)文章

  • JavaScript MVC 學(xué)習(xí)筆記（五）事件操作的拓展

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

    Anshiii 評論0 收藏0

  • JavaScript MVC 學(xué)習(xí)筆記（一）初識JS MVC

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

    xorpay 評論0 收藏0

  • Backbone.js學(xué)習(xí)筆記（一）

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

    FrancisSoung 評論0 收藏0

  • JavaScript MVC 學(xué)習(xí)筆記（三）類的使用（中）

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

    DandJ 評論0 收藏0

  • JavaScript MVC 學(xué)習(xí)筆記（四）類的使用(下)

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

    Rango 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<