JavaScript 事件——“內存和性能”的注意要點

YPHP 發布于2019-08-22 11:00 / 3134人閱讀

摘要：事件委托對事件處理程序過多的問題的解決方案就是事件委托。最適合采用事件委托技術的事件包括和。移除事件處理程序通常造成空事件處理程序的原因有可能是操作等或使用等。以防止部分瀏覽器出現內存問題。

事件委托

對“事件處理程序過多”的問題的解決方案就是事件委托。例如，click事件會一直冒泡到document層次。也就是說，我們可以為整個頁面指定一個onclick事件處理程序，而不必給每個可單擊的元素分別添加事件處理程序。如下面的代碼：


    go baidu.com
    change body color
    hello world

添加事件處理程序：

var item1 = document.getElementById("go");
var item2 = document.getElementById("do");
var item3 = document.getElementById("pop");

item1.addEventListener("click", function () {
    location.;
});
item2.addEventListener("click", function () {
    document.body.style.backgroundColor = "#ccc";
});
item3.addEventListener("click", function () {
    console.log("hello world");
});

這樣寫會有數不清的代碼用于添加事件處理程序，但如果利用事件委托技術，就可以用比較少的代碼解決這個問題：

var list = document.getElementById("list");
function handleEvent() {
    switch (event.type) {
        case "click":
            switch (event.target.id) {
                case "go":
                    location.;
                    break;
                case "do":
                    document.body.style.backgroundColor = "#ccc";
                    break;
                case "pop":
                    console.log("hello world");
                    break;
            }
            break;
        case "dblclick":
            if (event.target.id == "list") {
                list.style.visibility = "hidden";
            };
            break;
    }
}
list.addEventListener("click", handleEvent);
list.addEventListener("dblclick", handleEvent);

這樣就輕松加愉快的解決問題了。

另外，如果可行的話，可以考慮為document對象添加一個事件處理程序，用以處理頁面上發聲的某種特定的事件。

最適合采用事件委托技術的事件包括click、mousedown、mouseup、keydown、keyup和keypress。

移除事件處理程序

通常造成空事件處理程序的原因有可能是DOM操作（removeChild()等）、或使用innerHTML等。如：

var btn = document.getElementById("btn");
btn.addEventListener("click", btnHandler);
function btnHandler () {
    switch (event.type) {
        case "click":
            document.getElementById("myDiv").innerHTML = "Processing...";
            break;
    }
}

在div元素中設置innerHTML可以把按鈕移走，但事件處理程序依然與按鈕保持引用關系，所以最好設置成如下：

var btn = document.getElementById("btn");
btn.addEventListener("click", btnHandler);
function btnHandler () {
    switch (event.type) {
        case "click":
            // do something
            btn.onclick = null;
            document.getElementById("myDiv").innerHTML = "Processing...";
            break;
    }
}

在事件處理程序中刪除按鈕也能阻止事件冒泡

另外，在頁面卸載之前，也應該通過onunload事件處理程序移除所有事件處理程序。以防止部分瀏覽器出現內存問題。

GPU云服務器云服務器 javascript的事件云主機的要點深度學習的要點 javascript事件

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

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

JavaScript Ajax與Comet——“進度事件”的注意要點

摘要：有以下個進度事件在接收到響應數據的第一個字節時觸發。在接收響應數據期間持續的觸發在請求發生錯誤時觸發在因調用方法而終止連接時觸發在接收到完整的響應數據時觸發在通信完成或者觸發，，事件后觸發。有以下6個進度事件： loadstart: 在接收到響應數據的第一個字節時觸發。 progress: 在接收響應數據期間持續的觸發 error: 在請求發生錯誤時觸發 abort: 在因調用ab...

ad6623 2019-08-19 17:40 評論0 收藏0
JavaScript 事件——“事件流和事件處理程序”的注意要點

摘要：事件流級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段。事件處理程序的名字以開頭，如等。如使用級方法指定的事件處理程序被認為是元素的方法。事件流事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。事件冒泡即事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的節點。如： ...

Amio 2019-08-19 17:22 評論0 收藏0
JavaScript 事件——“模擬事件”的注意要點

DOM中的事件模擬三個步驟：首先通過document.createEvent()方法創建event對象，接收一個參數，即表示要創建的事件類型的字符串： UIEvents（DOM3中的UIEvent）鼠標和鍵盤事件； MouseEvents（DOM3中的MouseEvent）鼠標事件； MutationEvents（DOM3中的MutationEvent）變動事件； HTMLEvents（沒有...

BakerJ 2019-08-19 17:26 評論0 收藏0
JavaScript 事件——“事件類型”中“UI事件”的注意要點

摘要：事件這個事件在文檔被完全卸載后觸發。事件當瀏覽器窗口被調整到一個新的高度或寬度，就會觸發該事件。事件該事件雖然在對象上發生的，但實際表示的是頁面中響應元素的變化。事件關于等事件以后再討論事件關于等事件以后再討論事件關于等事件以后再討論 DOM3級事件規定了一下幾類事件 UI事件，當用戶與頁面上的元素交互時除法；焦點事件，元素獲得或失去焦點；鼠標事件，通過鼠標在頁面上執行操作；滾...

sushi 2019-08-19 17:22 評論0 收藏0
JavaScript 事件——“事件對象”的注意要點

摘要：在觸發上的某個事件時，會產生一個事件對象。中的事件對象兼容的瀏覽器會將一個對象傳入到事件處理程序中。返回布爾值，指示事件是否可擁可取消的默認動作。立即停止事件在層次中的傳播，即取消進一步的事件捕獲或冒泡。在觸發DOM上的某個事件時，會產生一個事件對象event。 DOM中的事件對象兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。event對象包含與創建它的特定事件有關...

xuexiangjys 2019-08-19 17:22 評論0 收藏0