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

資訊專欄INFORMATION COLUMN

JavaScript 事件——“內(nèi)存和性能”的注意要點(diǎn)

YPHP / 3140人閱讀

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

事件委托

對“事件處理程序過多”的問題的解決方案就是事件委托。例如，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");
});

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

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對象添加一個事件處理程序，用以處理頁面上發(fā)聲的某種特定的事件。

最適合采用事件委托技術(shù)的事件包括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元素中設(shè)置innerHTML可以把按鈕移走，但事件處理程序依然與按鈕保持引用關(guān)系，所以最好設(shè)置成如下：

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;
    }
}

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

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

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

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

相關(guān)文章

  • JavaScript Ajax與Comet——“進(jìn)度事件”的注意要點(diǎn)

    摘要：有以下個進(jìn)度事件在接收到響應(yīng)數(shù)據(jù)的第一個字節(jié)時觸發(fā)。在接收響應(yīng)數(shù)據(jù)期間持續(xù)的觸發(fā)在請求發(fā)生錯誤時觸發(fā)在因調(diào)用方法而終止連接時觸發(fā)在接收到完整的響應(yīng)數(shù)據(jù)時觸發(fā)在通信完成或者觸發(fā)，，事件后觸發(fā)。 有以下6個進(jìn)度事件： loadstart: 在接收到響應(yīng)數(shù)據(jù)的第一個字節(jié)時觸發(fā)。 progress: 在接收響應(yīng)數(shù)據(jù)期間持續(xù)的觸發(fā) error: 在請求發(fā)生錯誤時觸發(fā) abort: 在因調(diào)用ab...

    ad6623 評論0 收藏0

  • JavaScript 事件——“事件流和事件處理程序”的注意要點(diǎn)

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

    Amio 評論0 收藏0

  • JavaScript 事件——“模擬事件”的注意要點(diǎn)

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

    BakerJ 評論0 收藏0

  • JavaScript 事件——“事件類型”中“UI事件”的注意要點(diǎn)

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

    sushi 評論0 收藏0

  • JavaScript 事件——“事件對象”的注意要點(diǎn)

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

    xuexiangjys 評論0 收藏0

發(fā)表評論

0條評論

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