处理复杂web界面的javascript事件

场景1:

考虑一个复杂UI的网页，包括动态下拉列表、拖放字段、点编辑表单输入、调用对话框弹出窗口，然后触发动态行添加/删除的点击事件等，我在前端使用jquery、jquery UI、引导和select2。这样的接口将在整个DOM中有如此多的“单击”事件和其他事件处理程序。有些事件是在dom就绪本身上注册的，有些是在加载接口部分之后注册的

问题：

让DOM附加许多事件可以吗

这是否会导致内存泄漏、浏览器速度减慢问题

场景2:

弹出对话框将动态添加和删除行。首先，要在单击按钮时调用弹出对话框，我将“onclick=addPopupEvents（）”添加到按钮中。addPopupEvents函数还将为popup组件中的DOM元素注册其他事件。假设，如果弹出窗口中有“AddRowbelow”按钮，我会在addPopupEvents（）函数中添加相应的事件。关闭弹出窗口时，我调用另一个函数removePopupEvents（），以取消注册/删除隐藏弹出窗口时不需要的这些事件

问题：

我是否以正确的方式删除事件

我不确定是否真的需要removePopupEvents（）。不使用时是否需要清除所有事件

HTML:

JS:

var addDialogevents={
注册表项：函数（id）{
$（id）.对话框({
身高：300，
莫代尔：对
});
$（文档）。在（“单击”，“删除行”，函数（e）{
$（this）.closest（'div'）.remove（）；
});
$（“#添加行”）。在（'click'，function（）上{
$（“”）.appendTo（“#记录”）；
});
},
注销者：函数（id）{
$（id）.对话框（“关闭”）；
$（'.remove row'）.off（'click'）；
$（“#添加行”）.off（'click'）；
$（“#记录”）.empty（）；
}
}

---

我是一个新手。欢迎提供任何建议/指导。

尝试将

添加DialogEvents

作为全局对象

您的第一个问题： 让DOM附加许多事件可以吗？

你试过活动授权吗？将单个事件附加到项目的父元素，然后根据正在发生的情况运行检查。。。由于您使用的是jQuery，下面是一个快速示例：

$('#myProject').on('click mousemove mouseenter', function(e){
     switch (e.type){
          case 'click' : console.log('click'); break;
          case 'mousemove' : console.log('mousemove'); break;
          case 'mouseenter' : console.log('mouseenter'); break;
     };
});

将事件记录到控制台，以查看运行检查时必须使用的内容。通常，您需要使用目标元素和事件类型来确定代码应该做什么

请回答第二个问题： 我是否以正确的方式删除事件？

您要查找的内容称为事件名称空间：

基本上，当您附加事件时，您可以将其命名，以便以后可以将其分离：

$('#Button').on('click.myNameSpace', function(){ ... });
$('#Button').off('click.myNameSpace', function(){ ... });

---

希望这有点帮助：）

如果可能，可以发布

html

，

css

，

js

？请参阅我已将场景#2的示例源发布在：请下载源代码，在本地驱动器中使用并运行。

未捕获引用错误：未定义addDialogevents

很抱歉，我的第一个问题被误解了！它不是将多个事件附加到一个元素，而是实际上意味着将事件附加到界面中的许多DOM元素（如菜单、按钮等）。没有误解：）事件委派解决了处理大量事件的问题。绑定1个事件，然后使用它检查界面中的菜单、按钮等发生了什么（单击、悬停等）：）我正在尝试按UI组件对事件进行分组。在上面的示例中，我使用addDialogevents.registerall（）作为对话框组件。因此，对于表结构中元素的事件处理，我将编写addTableevents.registerall（）。这类似于较少CSS中的嵌套规则。我这样做是为了web开发者的最佳实践，尽管我不知道这样做是否值得。

var addDialogevents = {
    registerall: function(id){
        $(id).dialog({
          height: 300,
          modal: true
        });
        $(document).on("click", ".remove-row", function (e) {
            $(this).closest('div').remove();
        });

        $('#add-row').on('click',function(){
            $('<div><input type="text" size="20" />&nbsp;&nbsp;<a class="remove-row" href="javascript:void(0)"><b>x</b></a></div>').appendTo('#records');
        });
    },
    deregister: function(id){
        $(id).dialog('close');
        $('.remove-row').off('click');
        $('#add-row').off('click');
        $('#records').empty();
    }
}

$('#myProject').on('click mousemove mouseenter', function(e){
     switch (e.type){
          case 'click' : console.log('click'); break;
          case 'mousemove' : console.log('mousemove'); break;
          case 'mouseenter' : console.log('mouseenter'); break;
     };
});

$('#Button').on('click.myNameSpace', function(){ ... });
$('#Button').off('click.myNameSpace', function(){ ... });