亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

YPHP / 3198人閱讀

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

事件委托

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

    
    
  • 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");
});

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

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

這樣就輕松加愉快的解決問(wèn)題了。

另外，如果可行的話，可以考慮為document對(duì)象添加一個(gè)事件處理程序，用以處理頁(yè)面上發(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è)面卸載之前，也應(yīng)該通過(guò)onunload事件處理程序移除所有事件處理程序。以防止部分瀏覽器出現(xiàn)內(nèi)存問(wèn)題。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91604.html

相關(guān)文章

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

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

    ad6623 評(píng)論0 收藏0

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

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

    Amio 評(píng)論0 收藏0

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

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

    BakerJ 評(píng)論0 收藏0

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

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

    sushi 評(píng)論0 收藏0

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

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

    xuexiangjys 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<