JavaScript 事宜——“内存和机能”的注重要点

2019年8月30日 95次阅读 来源: JS菌

事宜托付

对“事宜处置惩罚顺序过量”的题目的处理方案就是事宜托付。比方，click事宜会一向冒泡到document条理。也就是说，我们可认为全部页面指定一个onclick事宜处置惩罚顺序，而没必要给每一个可单击的元素离别增加事宜处置惩罚顺序。以下面的代码：

<ul id="list">
    <li id="go">go baidu.com</li>
    <li id="do">change body color</li>
    <li id="pop">hello world</li>
</ul>

增加事宜处置惩罚顺序：

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

item1.addEventListener("click", function () {
    location.href = "http://www.baidu.com";
});
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.href = "http://www.baidu.com";
                    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事宜处置惩罚顺序移除一切事宜处置惩罚顺序。以防备部份浏览器涌现内存题目。

    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004332883
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞