javascript - 处理复杂 Web 界面的 javascript 事件

Question

场景 1:

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

问题:

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

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

您尝试过事件委托(delegate)吗？您将单个事件附加到项目的父元素，然后针对正在发生的情况运行检查...因为您使用的是 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;
     };
});

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

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

您正在寻找的称为事件命名空间:

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

基本上，当您附加一个事件时，您会为其命名 - 以便稍后可以将其分离:

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

希望这能有所帮助:)