页面上的一个处理程序或元素上的多个处理程序

Question

我有一个问题，我不知道该怎么做更好：

1. 为“文档”添加处理程序并获取带有事件的属性（例如：$ (document) .click (function (e) {// e - is object of properties, get the elem = e.toElement})）
2. 为页面上的每个元素添加一个处理程序（例如：$ (el1) .click (..); $ (el2) .click (...);）

你觉得哪个更好——我认为第一个so这个方法会允许灵活的管理事件（我有一个功能可以：连接\断开事件，改变事件的功能，添加版本功能）

• 只是一个处理程序，而不是大量处理程序

示例： 我的想法是创建具有当我单击页面的某些元素时将使用的功能的对象，每个元素都有一个特殊的属性'data-group'和'data-mete'，当我点击它们时我从这些中获取数据属性并使用它来访问函数。

html

<div data-group="mainMenu" data-meta="home"> Home</div>
<div data-group="mainMenu" data-meta="product"> Product</div>

js

var evtObj = {
   keyboard: {......} ;
   mouse: {
      mainMenu:{
         home: function() {},
         product: function(){},
         .....
      }
   }
 };

Answer 1

使用单个事件处理程序，但不要将其附加到document，将其放在最近的包含元素上，该元素在 DOMReady 上可用，如下所示：

$('#container').on('click', '.elements', function(e) {
    e.preventDefault();
    var $el = $(this); // the element that raised the event
    // do something...
});