javascript - 在 Javascript 上实现事件的最佳方式

Question

作为一名 .NET 开发人员，我习惯自定义控件上的委托(delegate)和事件。我创建 javascript 代码已经有一段时间了，但我想知道在 javascript 中实现它的最佳方法。下面是我通常如何编码我的组件。

var RGComp= RGComp || {};
RGComp.MyComponent = function () {
    function events(){
        $("a").unbind("click");
        $("a").click(function () {
             // Do something
        });
    }
    function generateUI(){
        //generate HTML UI
        events();
    }
}

我确信这是不正确的。我必须一直调用 unbind 以避免堵塞 DOM。非常感谢。

Answer 1

全局事件处理程序

总会有人支持和反对任何事情，包括空气分子的运动，但最终重要的是你能够做你需要做的事情，并且在这个过程中保持组织性。在 JAB Creations 网络平台上，我们在适当的情况下使用全局事件，有时我们会设置元素特定事件如果需要。

//Do not shorten event to e, you WILL want to reference e separately.
window.onclick = function(event)
{
 if (condition) {}
 else if (condition) {}
}

设置特定事件:

1. 通常，您需要检查 section() 或 page() 是否合适(假设您有正确的信息层次结构)。
2. 您需要一个函数返回当前页面的 ID，在我的例子中，这是 push_current_id() 或 id_(push_current_id()) (例如 push_current_id() == 'admin_' 对于控制面板，在 HTML5 中 id 属性的字符限制解除之前)。
3. 在某些情况下，为特定元素设置静态事件是可以的，但您通常会希望拥有普遍适用的行为:

CTRL + 水平滚动:

window.onwheel = function(event)
{
 if (event.ctrlKey)
 {
  if (e.scrollHeight > e.clientHeight && event.deltaY != 0)
  {
   event.preventDefault();
   //Change 5 to adjust sensitivity.
   e.scrollLeft = e.scrollLeft + (5 * event.deltaY);
  }
  //else if (condition) {}//Other behavioral tweaks.
 }
 //else if (condition) {}//Other behavioral tweaks.
}

主要的收获是，您将大多数(如果不是全部)事件调用限制为全局处理程序，并且您可以将元素挂接到这些全局事件的部分所需的条件指定为具体或广泛。您不需要添加/删除事件，只需调整 if 条件即可。我确信有人会强烈反对，尽管我们在整个 Web 平台上使用这种方法取得了成功，该平台旨在在缺乏框架和库的情况下显式工作以最大限度地提高性能。