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

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

为“文档”添加一个处理程序并获取带有事件的属性（例如：

$（文档）。单击（函数（e）{//e-是属性的对象，获取elem=e.toElement}）

）

向页面上的每个元素添加处理程序（例如：

$（el1）。单击（…）；$（el2）。单击（…）；

）

您认为哪一个更好？我认为第一个这样的方法将允许灵活地管理事件（我有一个功能，可以：连接\断开事件，更改事件的功能，并添加版本功能）

• 只是一个处理程序，而不是一个大的数字

例如：

---

我的想法是用一个函数创建一个对象，当我点击页面的某个元素时会用到这个函数，每个元素都有一个特殊的属性“data group”和“data mete”，当我点击它们时，我从这些属性中获取数据并使用它访问函数

html

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

---

使用单个事件处理程序，但不要将其附加到

文档

，将其放在DOMReady上可用的最近的包含元素上，如下所示：

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

---

为什么更好=我问是因为我想添加。。。1000个handler这正是为什么，1个handler比1000好。我的想法是用一个函数来创建对象，当我单击页面的某个元素时将使用该函数，每个元素都有一个特殊的属性“data group”和“data mete”，当我单击它们时，我从这些属性中获取数据并使用它来访问该函数。例如：html主页产品js var evtObj={键盘：{……}；鼠标：{主菜单：{主页：函数（）{}，产品：函数（）{}，…}}@MisaGu是的，我在我的答案中向你们展示的方法是最好的方法，但是我有不同的元素和不同的类，但是你们的答案只适用于容器中的一个类

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