Ví dụ về sử dụng phổ biến, thực tế của sự kiện bong bóng và chụp?

Question

Ai đó có thể cung cấp các ví dụ thực tế, hàng ngày về sự kiện bong bóng và sự kiện chụp trong jQuery/javascript? Tôi thấy tất cả các loại ví dụ thể hiện các khái niệm này nhưng chúng luôn có vẻ như những thứ bạn không bao giờ thực sự cần trong một ứng dụng web thông thường.

Cả mô tả và đoạn mã sẽ được đánh giá cao.

Answer 1

Sủi bọt sự kiện thực tế?

Có hoặc không có jQuery (nhớ rằng bạn có thể xử lý các sự kiện sôi nổi mà không sử dụng thư viện) có một số tình huống mà bạn muốn cấu trúc mã của mình để tận dụng lợi thế của bong bóng.

Một ví dụ: giả sử bạn có một trang nơi các phần tử được tạo động, nhưng bạn muốn xử lý một lần nhấp vào các yếu tố đó. Bạn không thể ràng buộc một trình xử lý sự kiện trực tiếp với chúng trước khi chúng tồn tại, nhưng ràng buộc các trình xử lý riêng lẻ cho chúng khi bạn tạo ra chúng là một chút đau. Thay vào đó, hãy ràng buộc một trình xử lý sự kiện vào đối tượng container: các sự kiện nhấn sẽ phát sinh từ các phần tử riêng lẻ tới vùng chứa nhưng bạn vẫn có thể biết phần tử nào đã được nhấp vào - jQuery làm cho việc này trở nên dễ dàng nếu bạn đang sử dụng cú pháp thích hợp là .on() hoặc .delegate() (hoặc thậm chí .live() nếu bạn có phiên bản jQuery thực sự cũ) vì nó đặt this thành phần tử được nhấp.

<div id="someContainer"></div> 

$("#someContainer").on("click", ".dynamicElement", function() { 
    // this is the element, do something with it 
}); 

Điều này nói rằng khi nhấp vào phần tử có lớp "dynamicElement" là con của div "someContainer" làm điều gì đó. Nó sẽ hoạt động bất kể phần tử "dynamicElement" có tồn tại khi tải trang hay không, được thêm vào sau để phản hồi lại một số hành động người dùng khác, hoặc có thể được nạp với Ajax.

Answer 2

Tôi thêm hình ảnh động vào div, tôi dự định sử dụng sự kiện bubbling để nắm bắt các sự kiện tải trong div chứa.