Question

我想知道是否有一些非常好的方法来处理大量的JS事件。我不喜欢基于id的方法 - 太多的id，绑定和一些事件需要在几个目标上触发，所以我需要给它们不同的名称并使用这样的东西

$('#some-id').add('#some-id-another').click(...)

或类。在某个地方，我看到了一个非常好的方法

<span data-cmd="menu">Open Menu First link</span>
.....some html
<span data-cmd="menu">Open Menu Second link</span>
<span data-cmd="settings">Setting</span>
<script>
//bind delegated click listeners to body
//get target's data
switch()
case "menu": do smtng
case "setting": do smtng
</script>

看起来非常清晰流畅而美观。你们看到的主要缺点是什么？比id / class慢得多？

Answer 1

使用jQuery，我认为您有两个主要的解决方案来处理大量事件并保持代码清洁。好消息是这些解决方案并非不相容......

<强> 1。将您的代码组织为模块

var module = {
  init: function () {
    module.listeners();
  },
  listeners: function () {
    $('#myDiv').mouseover(module.handlers.divHover);
    $('button').click(module.handlers.buttonClick);
  },
  handlers: {
    divHover: function () {
      console.log('Div hovered!');
    },
    buttonClick: function () {
      console.log('Button clicked!');
    }
  }
};

$(document).ready(module.init);

<强> 2。使用事件委派

在JavaScript中，您可以使用冒泡或捕获来处理事件。使用jQuery，这非常简单......

而不是这样做：

$('.btn').click(function () {
  console.log('Button clicked!');
});

你可以这样做：

$('body').on('click', '.btn', function () {
  console.log('Button clicked!');
});

Answer 2

尝试

$(document).on('click', '.menu', function() {
    //do something
});

这将在文档上创建一个单击处理程序，只要您单击该页面就会触发该处理程序。但是，如果点击源自具有“菜单”类的元素，它将仅执行该功能。

缺点是页面上的每次点击都会触发处理程序。点击不应该是一个问题，但如果你的事件是mouseIn那么它就是。

优点是一个单一的处理程序，减少了浏览器的负担，当然可以说与绑定单个元素上的500个单独的处理程序相比。

另一个优点是，如果您通过替换各个部分来操作DOM。如果将处理程序直接绑定到元素，那么在替换元素时，处理程序将丢失。您需要再次绑定处理程序。同样，如果添加新元素，则需要在此时绑定处理程序。但是，如果您将处理程序绑定到onload事件中的文档，那么您再也不用担心它了。

处理大量事件的最佳实践

2 个答案: