处理复杂web界面的javascript事件

场景1:

考虑一个具有复杂UI的网页，包括动态下拉，拖放字段，点编辑表单输入，调用对话框弹出，然后触发点击事件动态添加/删除行等，我使用jquery, jquery UI, bootstrap和select2在前端。这样的接口在DOM中会有很多'click'事件和其他事件处理程序。有些事件是在dom ready本身注册的，有些事件是在接口部分加载后注册的。

问题:

是否可以让DOM有许多事件附加?

场景2:

一个弹出对话框将有动态行添加&去除。首先，为了在按钮单击时调用一个弹出对话框，我向按钮添加了'onclick=addPopupEvents()'。addPopupEvents函数还将为弹出组件中的DOM元素注册其他事件。假设，如果弹出框中有"add row below"按钮，我在addPopupEvents()函数中添加相应的事件。当我关闭弹出窗口时，我调用另一个函数removePopupEvents()来注销/删除这些隐藏弹出窗口时不需要的事件。

问题:

我是否以正确的方式删除事件?
我不确定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。

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

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

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

你要找的是事件命名空间:

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

基本上，当你附加一个事件时，你给它命名，这样你就可以稍后将它分离:

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

希望这对你有帮助:)

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

相关内容

最新更新

热门标签：