国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《JavaScript高級程序設(shè)計（第3版）》——事件（十三）

DandJ / 900人閱讀

摘要：事件捕獲團隊提出的，與事件冒泡相反。事件處理程序事件用戶或瀏覽器自身執(zhí)行的某種動作。事件處理程序響應(yīng)某個事件的函數(shù)。事件委托目的解決事件處理程序過多問題。流程創(chuàng)建事件對象初始化事件對象觸發(fā)事件

事件是將JavaScript與網(wǎng)頁聯(lián)系在一起的主要方式。
事件流 
事件流：從頁面中接收到事件的順序。
事件冒泡

IE的事件流叫做事件冒泡：事件開始時由最具體 的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播到較為不具體 的節(jié)點（文檔）。

事件捕獲

Netscape Communicator團隊提出的，與事件冒泡相反。

用意：在事件到達預(yù)定目標之前捕獲它。

DOM 事件流

“DOM2 級事件”規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標階段、事件冒泡階段。

事件處理程序 
事件：用戶或瀏覽器自身執(zhí)行的某種動作。如：click、load、mouseover等。
事件處理程序：響應(yīng)某個事件的函數(shù)。

HTML事件處理程序

DOM0 級事件處理程序

添加

var btn = document.getElementById("myBtn");
btn.onclick = function (){
    alert(this.id);
}

刪除事件處理程序

btn.onclick = null;

DOM2 級事件處理程序

addEventListener(要處理的事件名， 作為事件處理程序的函數(shù)，布爾值)

removeEventListener(要處理的事件名， 作為事件處理程序的函數(shù)，布爾值)

布爾值：

true：在捕獲階段調(diào)用事件處理程序

false：在冒泡階段調(diào)用事件處理程序

var btn = document.getElementById("myBtn");
var hander = function(){
    alert(this.id);
};
// 添加事件處理程序
btn.addEventListener("click", hander, false);
// 刪除事件處理程序
btn.removeEventListener("click", hander, false);

主要好處：可以添加多個事件處理程序，按照添加的順序觸發(fā)。

IE事件處理程序

attachEvent(事件處理程序名稱， 事件處理程序函數(shù))

detachEvent(事件處理程序名稱， 事件處理程序函數(shù))

var btn = document.getElementById("myBtn");
var hander = function(){
    alert(this.id);
};
// 添加事件處理程序
btn.attachEventr("onclick", hander);
// 刪除事件處理程序
btn.detachEvent("onclick", hander);

主要好處：可以添加多個事件處理程序，按照添加相反的順序觸發(fā)。

跨瀏覽器的事件處理程序

addHander(要操作的元素， 事件名稱， 事件處理程序函數(shù))

removeHander(要操作的元素， 事件名稱， 事件處理程序函數(shù))

事件對象

event事件對象

阻止事件捕獲、事件冒泡：

 var btn = document.getElementById("myBtn");
        btn.onclick = function(event){
            alert("Clicked");
            event.stopPropagation();
        };
        
        document.body.onclick = function(event){
            alert("Body clicked");
        };
事件類型

UI事件：不一定與用戶操作有關(guān)的事件

DOMActive 不建議使用

load

unload

abort

error

resize

scroll

焦點事件

blur 失去焦點時 不會冒泡

DOMFocusIn 獲得焦點 冒泡

DOMFocusOut 失去焦點

focus 獲得焦點 不會冒泡

focusin

focusout

鼠標與滾輪事件

鍵盤與文本事件

keydown

keypress

keyup

復(fù)合事件

變動事件

HTML5 事件

設(shè)備事件

觸摸與手勢事件

事件性能

事件處理程序是函數(shù)。

在JavaScript中，每個函數(shù)都是對象，都會占用內(nèi)存。

內(nèi)存中的對象越多，性能就越差。

事件委托

目的：解決“事件處理程序過多”問題。

實現(xiàn)：利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

使用事件委托，只需要在 DOM 樹中盡量最高的層次上添加一個事件處理程序。

如下例子，由于所有列表項都是這個元素"myLinks"的子節(jié)點，而且它們的事件會冒泡，所以單擊事件最終會被這個函數(shù)處理。




    Event Delegation Example
移除事件處理程序

從文檔中移除帶有事件處理程序的元素時，最好先手工移除事件處理程序。以免內(nèi)存中留有“空事件處理程序”。

btn.onclick = null;

在卸載頁面之前，先通過 onunload事件處理程序移除所有事件處理程序。以免內(nèi)存中留有“空事件處理程序”。

模擬事件

在測試Web應(yīng)用程序中，模擬觸發(fā)事件是一種極其有用的技術(shù)。

流程：

創(chuàng)建事件對象

初始化事件對象

觸發(fā)事件

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103407.html

相關(guān)文章

  • javascript高級程序設(shè)計（第3版）之《script元素》

    摘要：表示要執(zhí)行外部文件的路徑或鏈接。由于規(guī)范要求腳本按照他們出現(xiàn)的先后順序執(zhí)行，因此第一個延遲腳本會優(yōu)先于第二個執(zhí)行，二這兩個腳本會優(yōu)先于事件執(zhí)行。無論使用任何方式，只要不存在和屬性，瀏覽器都會按照元素在頁面中出現(xiàn)的先后順序依次解析。 元素屬性 屬性 定義 async 【可選】。可以異步加載，表示可以立即下載此腳本，但不影響頁面其他操作。只對外部腳本有效。 charset ...

    miqt 評論0 收藏0

  • 機器視覺、模式識別庫匯總

    摘要：十開放模式識別項目開放模式識別項目，致力于開發(fā)出一套包含圖像處理計算機視覺自然語言處理模式識別機器學習和相關(guān)領(lǐng)域算法的函數(shù)庫。 一、開源生物特征識別庫 OpenBROpenBR 是一個用來從照片中識別人臉的工具。還支持推算性別與年齡。使用方法：$ br -algorithm FaceRecognition -compare me.jpg you.jpg二、計算機視覺庫 OpenCVOpenC...

    habren 評論0 收藏0

  • 【轉(zhuǎn)載】十三道JavaScript基礎(chǔ)題，你是否都做對了？

    摘要：題目二答案會報錯未定義這段代碼中混合了函數(shù)聲明和函數(shù)表達式的形式，而函數(shù)實際上是綁定到了上而不是。除此之外函數(shù)聲明與函數(shù)表達式的語法其實是等價的。因此，在外層函數(shù)函數(shù)體內(nèi)的兩個函數(shù)聲明，都會提升到之前執(zhí)行。 這是我在Javascript微信公眾號上看到的一篇文章，覺得挺有意思的，所以轉(zhuǎn)載過來跟大家分享一下，同時，對這些題目也加上了一些我個人的理解，如果有不對的地方，請大家指正。 題目...

    raoyi 評論0 收藏0

  • 如何正確學習JavaScript

    摘要：然而，雖然先生對無所不知，被譽為世界的愛因斯坦，但他的語言精粹并不適合初學者學習。即便如此，在后面我還是會建議把當做補充的學習資源。但目前為止，依然是學習編程的好幫手。周正則表達式，對象，事件，閱讀權(quán)威指南第，，，章。 既然你找到這篇文章來，說明你是真心想學好JavaScript的。你沒有想錯，當今如果要開發(fā)現(xiàn)代網(wǎng)站或web應(yīng)用（包括互聯(lián)網(wǎng)創(chuàng)業(yè)），都要學會JavaScript。而面對泛...

    canger 評論0 收藏0

發(fā)表評論

0條評論

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