在前端开发中，复选框是非常常见的元素。当用户对一个复选框进行操作时，可以通过 jQuery 中的 change 或 click 事件来响应用户行为。但是这两个事件有什么区别呢？本文将详细介绍它们的异同，并提供示例代码。
区别
触发时机
click事件：当复选框被点击时触发。change事件：当复选框的选中状态改变时触发，无论是通过鼠标点击还是键盘操作。
在一般情况下，用户点击一个复选框时会同时触发 click 和 change 事件。但是如果使用键盘（如 Tab 键）操作复选框，则只会触发 change 事件。
绑定方式
click事件：可以直接在复选框元素上绑定或使用on方法进行绑定。
-- -------------------- ---- ------- -- ---- -------------------------------------------- - -- -- --------- --- -- -- -- ---- --------------------------------------- ---------- - -- -- --------- ---
change事件：只能使用on方法进行绑定。
$('input[type="checkbox"]').on('change', function() {
// do something
});其他注意事项
- 如果使用代码来改变复选框的状态（例如通过
prop('checked', true)），则只会触发change事件，而不会触发click事件。 - 在某些情况下，可能需要同时监听
click和change事件。例如，在一些浏览器中，使用键盘操作复选框时只会触发change事件。此时，为了确保用户行为能被完全响应，我们需要同时监听这两个事件。
示例代码
-- -------------------- ---- ------- ------ --------------- --------------- -- -------- -- -- ----- ------ --------------------------------- - ------------------ -------- --- -- -- ------ ------ ----------------------------- ---------- - ------------------- -------- --- ---------
在上面的示例中，当用户点击复选框时，控制台会输出 click event 和 change event 两条信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30547