复选框'更改'事件通过将事件绑定到父div来工作

Question

到目前为止，我一直认为jQuery的change事件仅适用于<select>，<input type="checkbox">和<input type="radio">。

但是偶然的是，我已经将change事件绑定到我的复选框的父级，它仍然可以像我将该事件绑定到复选框本身一样。为什么这有效？

<div class="pwc">
    <input type="checkbox" id="pwc2" />
    <label for="pwc2">Only valid</label>
</div>

jQuery代码：

$(document).on('change', '#tabs .pwc', function(e) {
    ...
});

而不是：

 $(document).on('change', '#tabs .pwc input:checkbox', function(e) {
    ...
 });

Answer 1

这是因为change event（看Bubbles: Yes）气泡到父元素。

在输入元素发生变化的情况下，会为输入元素触发更改事件，然后将其传播（气泡）到祖先元素，直到它到达根（文档）。

如果查看处理程序中event对象的target，您可以发现为输入元素触发了事件。

这也是您如何使用event delegation进行更改事件的原因