Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tối ưu PageSpeed Insights
    • Cloud Cache (Tăng tốc web 1 giây)
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Web Development » [JS] Sự kiện DOM Element & Cách theo dõi Event Javascript trong Chrome

[JS] Sự kiện DOM Element & Cách theo dõi Event Javascript trong Chrome

Thứ Bảy, 21/03/2020 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Tôi đã sử dụng công cụ dành cho nhà lập trình website web là Chrome Developer Tools. Bài hôm nay mình sẽ chia sẻ đến các bạn một tính năng thú vị mà nhiều người chưa từng sử dụng. Bạn có thể sử dụng hàm chức năng monitorEvents.

Khi chưa biết đến tính năng này, nhiều lần tôi đã tự tạo những đoạn code JS & chạy trong chrome console với mục đích đơn giản chỉ để theo dõi vào một sự kiện và ghi lại lịch sử hành động của mình.

$("body").bind("click mousedown", function(e) {
    console.log(e);
});

Có một tiện ích được  tích hợp sẵn trong Chrome giúp bạn theo dõi sự kiện một cách dễ dàng hơn đó là monitorEvents . Dưới đây là một bản demo nhanh về cách sử dụng nó. Kiểm tra một element (xem ảnh chụp màn hình). Bây giờ thành phần đó đã được kiểm tra, có một biến tên $0 lưu đối tượng Element hiện tại của bạn.

Thay vì phải thêm các ràng buộc sự kiện, chỉ cần kiểm tra Element của bạn bằng cách ( chuột phải, chọn → Inspect vào element của bạn hoặc đi tới tab Elements trong Chrome Developer Tools và chọn 1 element) sau đó đi đến tab  Console và chạy lệnh:

monitorEvents($0, 'mouse')

$0 chỉ là phần tử DOM được chọn cuối cùng bởi Chrome Developer Tools. Bạn có thể theo dõi bất kỳ đối tượng DOM khác bằng cách sử dụng hàm  getElementById hoặc querySelector . Bạn cũng có thể truyền sự kiện “type” cho tham số thứ hai để thu hẹp theo dõi. Xem thêm tại đây.

Bạn cũng có thể theo dõi toàn bộ sự kiện trên document với lệnh:

monitorEvents(document.body, 'mouse')

Bây giờ khi bạn di chuyển chuột qua DOM element này hoặc nhấp vào nó, tên của sự kiện sẽ được hiển thị với dữ liệu của nó. Xem hình dưới:

devtools monitor events

monitor events

OK, bây giờ bạn có thể xem tất cả những sự kiện này trong chrome console và bạn đã theo dõi lịch sử hành động để tìm ra vấn đề lỗi của bạn, có lẽ bạn sẽ muốn chúng dừng lại! May mắn thay, có một chức năng để làm điều này , hàm có tên unmonitorEvents.

unmonitorEvents(document.body)

Bạn cũng có thể sử dụng ‘bàn phím’ thay vì ‘chuột’ nếu bạn đang theo dõi các sự kiện quan trọng liên quan đến keyboard.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Tạo câu hỏi trắc nghiệm có móc nối liên quan (câu hỏi có quan hệ)
  2. Tạo nút chia sẻ bài viết cho website với addthis
  3. Tích hợp Disqus vào wordpress toàn tập
  4. Thêm tính năng phóng ảnh cho website – cloudzoom jquery
  5. Tạo quảng cáo trượt 2 bên website
  6. Chèn hệ thống ứng dụng chat vào website với FireChat
  7. Hướng dẫn cách nén CSS và Js với GRUNT
  8. So sánh giữa WordPress và Joomla
  9. 24 plugins cho WordPress bạn nên sử dụng
  10. 11 Lazyload plugin tốt nhất dành cho WordPress

Chuyên mục: Web Development Tìm kiếm: chrome, Javascript

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.