$ (document) .on ('click', '#id', function () {}) so với $ ('# id'). on ('click', function () {}) [đóng]

Tôi đã cố gắng tìm ra sự khác biệt giữa

$(document).on('click', '#id', function(){});

và

$('#id').on('click', function(){});

Tôi không thể tìm thấy bất kỳ thông tin nào về việc có bất kỳ sự khác biệt nào giữa hai điều này hay không và nếu có thì sự khác biệt đó có thể là gì.

Ai đó có thể vui lòng giải thích nếu có bất kỳ sự khác biệt nào không?

Ví dụ đầu tiên thể hiện sự ủy nhiệm sự kiện . Trình xử lý sự kiện được liên kết với một phần tử cao hơn cây DOM (trong trường hợp này là cây document) và sẽ được thực thi khi một sự kiện đến phần tử đó bắt nguồn từ phần tử khớp với bộ chọn.

Điều này có thể xảy ra vì hầu hết các sự kiện DOM tạo bong bóng cây từ điểm gốc. Nếu bạn nhấp vào #idphần tử, một sự kiện nhấp chuột được tạo ra sẽ bong bóng thông qua tất cả các phần tử tổ tiên ( lưu ý bên: thực tế có một giai đoạn trước giai đoạn này, được gọi là 'giai đoạn nắm bắt', khi sự kiện đi xuống cây mục tiêu ). Bạn có thể nắm bắt sự kiện trên bất kỳ tổ tiên nào trong số đó.

Ví dụ thứ hai liên kết trình xử lý sự kiện trực tiếp với phần tử. Sự kiện sẽ vẫn bong bóng (trừ khi bạn ngăn chặn điều đó trong trình xử lý) nhưng vì trình xử lý bị ràng buộc với mục tiêu, bạn sẽ không thấy tác động của quá trình này.

Bằng cách ủy quyền một trình xử lý sự kiện, bạn có thể đảm bảo nó được thực thi cho các phần tử không tồn tại trong DOM tại thời điểm ràng buộc. Nếu #idphần tử của bạn được tạo sau ví dụ thứ hai, trình xử lý của bạn sẽ không bao giờ thực thi. Bằng cách liên kết với một phần tử mà bạn biết chắc chắn nằm trong DOM tại thời điểm thực thi, bạn đảm bảo rằng trình xử lý của bạn sẽ thực sự được gắn vào một thứ gì đó và có thể được thực thi khi thích hợp sau này.

Cân nhắc mã sau

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

Bây giờ, đây là sự khác biệt

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

Bây giờ, điều gì sẽ xảy ra nếu chúng ta thêm lại myTask?

$('#myTask').append('<li>Answer this question on SO</li>');

Nhấp vào mục myTask này sẽ không xóa nó khỏi danh sách, vì nó không có bất kỳ trình xử lý sự kiện nào bị ràng buộc. Nếu thay vào đó chúng tôi đã sử dụng .on, thì món đồ mới sẽ hoạt động mà không cần thêm nỗ lực nào từ phía chúng tôi. Đây là cách phiên bản .on sẽ trông như thế nào:

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

Tóm lược:

Sự khác biệt giữa .on()và .click()sẽ .click()không hoạt động khi các phần tử DOM được liên kết với .click()sự kiện được thêm động vào thời điểm sau đó trong khi .on()có thể được sử dụng trong các trường hợp mà các phần tử DOM được liên kết với .on()cuộc gọi có thể được tạo động vào thời điểm sau đó.