处理复杂Web界面的javascript事件

Question

场景1：

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

问题：

1. 是否可以让DOM附加许多事件？
2. 这会导致任何内存泄漏，浏览器减速问题吗？

场景2：

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

问题：

1. 我是否以正确的方式删除事件？
2. 我不确定removePopupEvents（）是否真的需要。 是否有必要在不使用时清除所有事件？

HTML：

<div><input type="button" value="dialog" onclick="addDialogevents.registerall('#dialog-modal')" /></div>
<div id="dialog-modal" title="Basic modal dialog" style="display:none">
<div class="cl"><a href="javascript:void(0)" onclick="addDialogevents.deregister('#dialog-modal')">close dialog</a></div>
  <div id="records">
  </div>
  <div><a id="add-row" href="javascript:void(0)">Add record</a></div>
</div>

CSS：

div { font:normal 12px Arial, Helvetica, sans-serif; }
div#records div { margin:10px 0; }
.cl { text-align:right; }
a { color:#06c !important; font-size:13px; text-decoration:none }
.cl a { font-size:11px; }

JS：

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

我是一个新手提前javascript。 任何建议/指导表示赞赏。

Answer 1

尝试addDialogevents作为全局对象？ http://jsfiddle.net/ybret/1/

Answer 2

你的第一个问题：是否可以让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;
     };
});

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

你的第二个问题：我是否以正确的方式去除事件？

您正在寻找的是名为Event Namespacing的事件：

http://api.jquery.com/event.namespace/

基本上，当您附加事件时，您可以将其命名为 - 所以您可以在以后分离它：

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

希望这个对你有帮助 ：）