将参数传递给事件处理程序的最佳做法是什么？

Question

考虑以下 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>

以下哪项是最佳做法？有没有更好/更简单的方法来完成这个？

Answer 1

您应该使用 data- 属性。

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

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

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

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