javascript - 减少重复点击事件

Question

我刚刚开始学习我的 javascript(模式、命名空间、对象等)，并尝试在我最新的项目中实践其中的一些内容。

我有一个简单的表单，我试图根据选中的复选框来显示/隐藏某些内容。 HTML 无法更改(长话短说)，所以我只关注手头的 javascript 问题，即，当有多个 ID 时，如何很好地减少重复性？

脚本(我确信可以压缩)如下:

var prereg = {

    hideItems: (function() {
        document.getElementById('companyName-element').style.display = 'none';
        document.getElementById('companyName-label').style.display = 'none';
    })(),

    showItems: function() {
        var checkbox = document.getElementById('businessCustomer'); 
        if(checkbox.checked) {
            document.getElementById('companyName-element').style.display = 'block';
            document.getElementById('companyName-label').style.display = 'block';
        } else {
            document.getElementById('companyName-element').style.display = 'none';
            document.getElementById('companyName-label').style.display = 'none';
        }
    },

    addEvent: function (el, ev, fn) {
         if (el.addEventListener) {
             el.addEventListener(ev, fn, false);
         } else if (el.attachEvent) {
             el.attachEvent('on' + ev, fn);
         } else {
             el['on' + ev] = fn;
         }
     }

}

prereg.addEvent(document.getElementById('businessCustomer-label'), 'click', prereg.showItems);
prereg.addEvent(document.getElementById('businessCustomer-element'), 'click', prereg.showItems);

Answer 1

我认为您正在寻找事件委托(delegate)，这是一种奇特的说法，对同一类型的所有事件使用单个处理程序。好吧，甚至不同类型也是一种选择。但这只是一个例子:

假设你的 html 看起来像这样:

<form id="formId"><input type="checkbox" id="foo"/>
    <input type="checkbox" id="bar"/>

诸如此类(不必打扰)。您的 JS 可以使用 1 个事件监听器和处理程序处理所有点击事件:

var form = document.getElementById('formId');
if (form.addEventListener)
{
    form.addEventListener('click',clickDelegator,false);
}
else
{
    form.attachEvent('onclick',clickDelegator);
}
function clickDelegator(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;//target holds reference to clicked element
    if (target.tagName.toLowerCase() !== 'input')
    {
        //not interested in this, just let the event pass
        return e;// or return true; or return;... doesn't matter
    }
    switch(target.type.toLowerCase())//target is an input field, we've established that
    {
        case 'checkbox':
            //code for checkboxes;
            //target is a checkbox, use target.checked, target.id, as normal
        break;
        case 'button':
            //deal with buttons here
        break;
        //etc...
    }
}

如果您想要 1 个委托(delegate)函数来处理所有事件，您可以，但是您必须 switch...case所有e.type当然，这通常会导致无用的、无法维护的 monter-function 。但正如您所知:这是可能的。

需要关闭吗？当然，没问题:

form.addEventListener('click',(function(someVar)
{
    return function(e)
    {
        e = e || window.event;
        clickDelegator.apply(this,[e,someVar]);
        //pass as argument, the clickDelegator was declared outside closure scope
        //and doesn't have access to someVar, but this way, it has the closure var
        //as an argument
    }
})(theClosureVar),false);

Google 一些更多事件委托(delegate)的例子，你不会后悔的...这是 JavaScript 的那些被严重低估的功能之一，并且没有像应有的那样广为人知。我希望能为您提供一个更好的闭包-委托(delegate)者组合示例，因为这是一个非常强大的组合。以移动设备为例:没有click事件，只有touchstart和touchend事件。因此，您设置 touchstart 处理程序来绑定(bind) touchend 监听器，并通过闭包将超时 id 添加到 touchend 事件的处理程序中。如果一段时间过去了，用户可能没有点击该元素，而是使用他/她手机的其他触摸功能，因此您可以分离监听器。

我不擅长解释这一点，但请看一些自定义 tab 的示例。事件有效，它通常归结为类似于我在这里运球的事情，现在我要 sleep 了......祝你好运