JavaScript 事件——“内存和性能”的注意要点

YPHP 发布于2019-08-22 11:00 / 3022人阅读

摘要：事件委托对事件处理程序过多的问题的解决方案就是事件委托。最适合采用事件委托技术的事件包括和。移除事件处理程序通常造成空事件处理程序的原因有可能是操作等或使用等。以防止部分浏览器出现内存问题。

事件委托

对“事件处理程序过多”的问题的解决方案就是事件委托。例如，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.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事件处理程序移除所有事件处理程序。以防止部分浏览器出现内存问题。

云服务器 GPU云服务器 javascript的事件云主机的要点深度学习的要点 javascript事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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