Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế web giá rẻ
    • Thiết kế website WordPress
    • Hosting Miễn Phí 100GB
    • Tích hợp thanh toán MoMo, ViettelPay, Vietcombank, MB..
    • Tối ưu Google PageSpeed
    • Sửa lỗi nâng cấp website
    • Viết plugin WordPress
    • Code Tool theo yêu cầu
  • 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.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook

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

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

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

HOÀNG WEB

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

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

Email: [email protected]

Website: www.hoangweb.com

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

  • Facebook
  • GitHub
  • YouTube

SẢN PHẨM

  • Plugin Thanh Toán Quét Mã QR Code Tự Động
  • WP2Speed – Tối ưu Google Speed
  • 23WebHost – Hosting Miễn Phí 100GB

LIÊN KẾT

  • Có nên thuê thiết kế website giá rẻ?
  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2023 | 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.