jquery $(document).on('click', 选择器, ... ) vs $(selector).on('click',

的文章如下：

在使用 jQuery 进行事件绑定时，我们经常会用到 $(document).on('click', 选择器, ... ) 和 $(selector).on('click', ...) 这两种方式。它们都可以用来绑定点击事件，但在实际应用中，它们有一些细微的差别。

$(document).on('click', 选择器, ... )：全局事件委托

全局事件委托是指将事件绑定到了 document 对象上，然后通过选择器来过滤需要绑定事件的元素。这种方式的好处是可以动态添加、删除元素而不需要重新绑定事件。

下面是一个例子，我们在页面上有一个按钮和一个动态生成的列表，点击列表项时，弹出对应的内容。

html
<button id="btn">点击添加列表项</button>
<ul id="list"></ul>
<script>
$(document).on('click', '#list li', function() {
  var text = $(this).text();
  alert(text);
});
$('#btn').click(function() {
  $('<li>').text('列表项').appendTo('#list');
});
</script>

在这个例子中，我们使用了全局事件委托的方式，将点击事件绑定到了 document 对象上，通过选择器 '#list li' 来过滤需要绑定事件的元素。当我们点击列表项时，会弹出对应的内容。

$(selector).on('click', ... )：直接绑定事件

直接绑定事件是指将事件直接绑定到选择器匹配的元素上。这种方式适用于静态页面或者在动态添加元素后需要重新绑定事件的情况。

下面是一个例子，我们在页面上有一个按钮和一个列表，点击列表项时，弹出对应的内容。

html
<button id="btn">点击添加列表项</button>
<ul id="list"></ul>
<script>
$('#list').on('click', 'li', function() {
  var text = $(this).text();
  alert(text);
});
$('#btn').click(function() {
  $('<li>').text('列表项').appendTo('#list');
});
</script>

在这个例子中，我们使用了直接绑定事件的方式，将点击事件绑定到了选择器 '#list' 匹配的元素上，然后通过选择器 'li' 来过滤需要绑定事件的元素。当我们点击列表项时，会弹出对应的内容。

通过比较全局事件委托和直接绑定事件的方式，我们可以看出它们的应用场景和使用方法有所不同。全局事件委托适用于动态生成的元素或者需要委托给父级元素处理事件的情况，而直接绑定事件适用于静态页面或者在动态添加元素后需要重新绑定事件的情况。在实际开发中，我们可以根据具体需求选择合适的方式来进行事件绑定。