将参数传递给事件处理程序的最佳做法是什么？ [关闭]答案

【问题标题】：What is the best practice for passing arguments to event handlers? [closed]将参数传递给事件处理程序的最佳做法是什么？ [关闭]
【发布时间】：2016-06-03 00:29:32
【问题描述】：

考虑以下 HTML 块：

<button id="follow-user1" class="btnFollow">Follow User1</button>
<button id="follow-user2" class="btnFollow">Follow User2</button>
<button id="follow-user3" class="btnFollow">Follow User3</button>
<button id="follow-user4" class="btnFollow">Follow User4</button>

有几种方法可以将事件处理程序绑定到每个按钮：

通过`onclick="code()"`（不良做法）：

<button id="follow-user1" class="btnFollow" onclick="alert(1)">Follow User1</button>

<button id="follow-user1" class="btnFollow" onclick="alert(1)">Follow User1</button>
<button id="follow-user2" class="btnFollow" onclick="alert(1)">Follow User2</button>
<button id="follow-user3" class="btnFollow" onclick="alert(1)">Follow User3</button>
<button id="follow-user4" class="btnFollow" onclick="alert(1)">Follow User4</button>

通过元素的`id`：

$("#follow-user1").click(function(){
 alert(1);
});

$("#follow-user1").click(function(){
  alert(1);
});
$("#follow-user2").click(function(){
  alert(2);
});
$("#follow-user3").click(function(){
  alert(3);
});
$("#follow-user4").click(function(){
  alert(4);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-user1" class="btnFollow">Follow User1</button>
<button id="follow-user2" class="btnFollow">Follow User2</button>
<button id="follow-user3" class="btnFollow">Follow User3</button>
<button id="follow-user4" class="btnFollow">Follow User4</button>

通过元素的`class`，使用`:eq()`选择器：

$(".btnFollow:eq(0)").click(function(){
 alert(1);
});

$(".btnFollow:eq(0)").click(function() {
  alert(1);
});
$(".btnFollow:eq(1)").click(function() {
  alert(2);
});
$(".btnFollow:eq(2)").click(function() {
  alert(3);
});
$(".btnFollow:eq(3)").click(function() {
  alert(4);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-user1" class="btnFollow">Follow User1</button>
<button id="follow-user2" class="btnFollow">Follow User2</button>
<button id="follow-user3" class="btnFollow">Follow User3</button>
<button id="follow-user4" class="btnFollow">Follow User4</button>

以下哪一项是最佳做法？有没有更好/更简单的方法来实现这一点？

【问题讨论】：

将事件附加到所有按钮？这个$(".btnFollow").click(function() { alert(1); });呢？
假设事件处理程序几乎相同，那么以上都不是理想的。使用单个通用事件处理程序，该处理程序仅检查单击了哪个按钮来修改其行为。

标签： javascript jquery html jquery-selectors jquery-events

【解决方案1】：

你应该使用data-属性。

如果你想捕捉特定的点击，你可以订阅不同的数据属性：

$('*[data-subscribe-to="mynumber"]');

如果你想使用来自被点击元素的数据，你可以使用：

$(element).data('subscribe-to');

【讨论】：

这似乎是一个很好的方法。我会接受这个答案。

通过onclick="code()"（不良做法）：

通过元素的id：

通过元素的class，使用:eq()选择器：

通过`onclick="code()"`（不良做法）：

通过元素的`id`：

通过元素的`class`，使用`:eq()`选择器：