Sự kiện tuyên truyền trong Javascript

Question

Nếu tôi có phần tử (html) được lồng trong phần tử khác và cả hai phần tử đều có trình xử lý nhấp chuột, hãy nhấp vào phần tử bên trong thực thi trình xử lý nhấp chuột của nó và sau đó bong bóng lên cha mẹ và thực thi trình xử lý nhấp chuột của nó. Đó là cách tôi hiểu nó.

Làm sự kiện bong bóng lên cây DOM nếu không có sự kiện nào được đính kèm giống nhau và nếu có, có đáng để đặt event.stopPropagation() vào cuối mọi trình xử lý để dừng điều này và tăng tốc độ không?

Answer 1

sự kiện hầu như luôn luôn bong bóng trừ khi event.cancelBubble = true được đặt hoặc event.stopPropagation() được sử dụng. Tuy nhiên, bạn chỉ nhận thức được điều này khi một trong các trình xử lý sự kiện của bạn bị vấp.

Xem http://en.wikipedia.org/wiki/DOM_events để biết danh sách các sự kiện có bong bóng. (Lưu ý: trong bảng các sự kiện HTML, có thể hủy được đề cập đến hiệu quả của event.preventDefault() hoặc trả về false để hủy hành động mặc định, không phải bong bóng)

Xem thêm http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow, cụ thể 1.2.1 Luồng cơ bản cần hiểu giai đoạn bắt giữ và giai đoạn tạo bọt của sự kiện tuyên truyền.

EDIT

http://mark-story.com/posts/view/speed-up-javascript-event-handling-with-event-delegation-and-bubbling gợi ý có là một đạt được hiệu suất bằng cách ngăn chặn tuyên truyền nhưng không cung cấp dữ liệu.

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/a9af0aa4216a8046 đề xuất rằng các trình duyệt phải được tối ưu hóa cho hành vi bubbling và nói rằng không có sự khác biệt đáng kể về hiệu suất. Một lần nữa không có dữ liệu.

http://developer.yahoo.com/performance/rules.html#events cung cấp một kỹ thuật tốt để cải thiện hiệu suất xử lý sự kiện, nhưng không trực tiếp nói về hiệu suất stopPropagation.

Cuối cùng, bạn phải lập hồ sơ sự khác biệt để có ý tưởng tốt về các lợi ích trên trang web của mình.

Answer 2

Tôi cho rằng hành vi này đã được tối ưu hóa tốt bởi trình duyệt, vì vậy bạn sẽ không thể tăng hiệu suất đáng kể khi ngừng truyền (ngoại trừ, có lẽ, đối với cấu trúc DOM lồng nhau thực sự phức tạp). Nếu bạn lo lắng về hiệu suất và đối phó với rất nhiều sự kiện, bạn có thể quan tâm đến việc ủy quyền sự kiện thay thế.

Ngoài ra, bạn nên nhớ mã của mình phải ở trạng thái có thể đọc được và tự giải thích được. stopPropagation() là một phương pháp được sử dụng cho mục đích nhất định, do đó, sử dụng nó trong mọi phương pháp có thể thực sự khó hiểu.