Javascript – Cách liệt kê tất cả các trình xử lý sự kiện đang hoạt động trên một trang Web, các sự kiện được xác định bởi addEventListener hoặc trong một thuộc tính sự kiện

Bạn đang xem: danh sách javascript trình xử lý sự kiện

Giới thiệu

Khi phát triển một trang Web, trình xử lý sự kiện được triển khai bởi các thư viện của bên thứ ba hoặc bởi chính bạn.

Ví dụ, một trình nghe trên sự kiện dragstart cho phần tử div

:

  dv = document.getElementById ('col-left');

dv.addEventListener ('dragstart', function (e) {
    dv.style.opacity = 0,6;
    e.dataTransfer.dropEffect = "di chuyển";
});  

Trình nghe ở trên cũng có thể được định nghĩa theo cách khác bằng cách sử dụng thuộc tính sự kiện được liên kết ondragstart :

  dv = document.getElementById ('col-left');
          
dv.ondragstart =
  hàm (e) {
        dv.style.opacity = 0,6;
        e.dataTransfer.dropEffect = "di chuyển";
  };  

Hoặc trực tiếp trong mã HTML nếu không được xác định bởi hàm Javascript:

  & lt; div id = "col-left"
ondragstart = "function (e) {this.style.opacity = 0.6; e.dataTransfer.dropEffect = 'move';" & gt;  

Về cơ bản, có 2 cách khi xác định sự kiện, chỉ cần thêm tiền tố on bằng thuộc tính sự kiện:

 
element.addEventListener ('click', function () {…}); 

element.onclick = function () {…}; element.addEventListener ('load', function () {…});

element.onload = function () {…};

Trong một số trường hợp, khi bắt đầu các tác vụ cải thiện hiệu suất hoặc khi gỡ lỗi các vấn đề về hành vi trong trình xử lý sự kiện do thư viện bên thứ ba,
chúng ta có thể cần có cái nhìn tổng quan về tất cả những người nghe sự kiện. Cách lấy danh sách đầy đủ: các sự kiện được xác định bằng addEventListener và các sự kiện được xác định
với thuộc tính tương ứng?

Nó không quá rõ ràng.
Trong bài báo này được mô tả một hàm toàn cầu listAllEventListaries liệt kê tất cả các sự kiện, bất kể
sự kiện đã được tạo. Chức năng listAllEventListaries được bật trong trang này, trong bảng điều khiển phát triển của trình duyệt chạy:

  console.table (listAllEventListaries ());  

Liệt kê các sự kiện được xác định bằng thuộc tính sự kiện

Chúng tôi có thể tìm thấy các tập lệnh hữu ích trên web

  function listAllEventListaries () {
  const allElements = Array.prototype.slice.call (document.querySelectorAll ('*'));
  allElements.push (tài liệu);
  allElements.push (cửa sổ);
  
  const các loại = [];
  
  for (let ev in window) {
    if (/^on/.test(ev)) type [styles.length] = ev;
  }

  let các phần tử = [];
  for (let i = 0; i & lt; allElements.length; i ++) {
    const currentElement = allElements [i];
    for (let j = 0; j & lt; styles.length; j ++) {
      if (typeof currentElement [type [j]] === 'function') {
        Elements.push ({
          "nút": currentElement,
          "loại": loại [j],
          "func": currentElement [type [j]]. toString (),
        });
      }
    }
  }

  trả về các phần tử.sort (function (a, b) {
    return a.type.localeCompare (b.type);
  });
}  

Các tập lệnh tuyệt vời. Trong tập lệnh trên, đối tượng toàn cục window cũng được thêm vào vì chúng tôi muốn định nghĩa các trình nghe
cho đối tượng này, đặc biệt là các sự kiện cuộn cho mục đích gỡ lỗi.

  & gt; console.table (listAllEventListaries ())  

Đầu tiên, chúng tôi rất vui nhưng chúng tôi ngay lập tức nhận thấy một số bộ xử lý sự kiện mà chúng tôi đã phát triển bị thiếu.

Những sự kiện nào và tại sao? Sau khi điều tra: tất cả các sự kiện được xác định bằng phương thức addEventListener đều bị thiếu,
chúng không được lưu trữ trong các thuộc tính sự kiện của đối tượng on & lt; event & gt; ( onclick, onload, onfocus… ).

Liệt kê các sự kiện được thêm bằng phương thức addEventListener

Chưa có phương thức gốc nào tồn tại trong đặc tả DOM để truy xuất các sự kiện được xác định thông qua phương thức addEventListener .

getEventListaries trong công cụ dành cho nhà phát triển

Ví dụ: các công cụ dành cho nhà phát triển trình duyệt, công cụ dành cho nhà phát triển Chrome, cung cấp trong bảng điều khiển phương thức getEventListaries ()

Nhưng phương pháp này chỉ có sẵn trong các công cụ dành cho nhà phát triển.

Xem Thêm  Hình ảnh trung tâm HTML - Ví dụ về trung tâm hình ảnh căn chỉnh CSS - căn chỉnh hình ảnh trung tâm css

Ghi đè nguyên mẫu addEventListener

Nếu chúng tôi muốn phương thức này khả dụng trong các tập lệnh, chúng tôi phải ghi đè
Nguyên mẫu addEventListener .

Việc ghi đè bao gồm việc thêm một đối tượng eventListenerList sẽ lưu trữ các trình nghe sự kiện đã thêm. Phương thức sẽ truy xuất
những người nghe sự kiện sẽ trả về đối tượng này.

Ví dụ: đối với Cửa sổ giao diện, nguyên mẫu được sửa đổi như sau:

  Window.prototype._addEventListener = Window.prototype.addEventListener;

Window.prototype.addEventListener = function (a, b, c) {
   if (c == không xác định) c = false;
   this._addEventListener (a, b, c);
   if (! this.eventListenerList) this.eventListenerList = {};
   if (! this.eventListenerList [a]) this.eventListenerList [a] = [];
   this.eventListenerList [a] .push ({Listener: b, options: c});
};  

Mã này cũng nên được áp dụng cho các giao diện Document Element .

Để tránh mã trùng lặp, sửa đổi nguyên mẫu có thể được áp dụng một lần trong giao diện EventTarget .

EventTarget là một giao diện DOM được triển khai bởi các đối tượng có thể nhận các sự kiện và có thể có người nghe cho chúng.

Phần tử , Tài liệu Cửa sổ là các mục tiêu sự kiện phổ biến nhất, nhưng các đối tượng khác cũng có thể là mục tiêu sự kiện .
Ví dụ: XMLHttpRequest , AudioNode , AudioContext và những thứ khác.

  EventTarget.prototype._addEventListener = EventTarget.prototype.addEventListener;

EventTarget.prototype.addEventListener = function (a, b, c) {
   if (c == không xác định) c = false;
   this._addEventListener (a, b, c);
   if (! this.eventListenerList) this.eventListenerList = {};
   if (! this.eventListenerList [a]) this.eventListenerList [a] = [];
   this.eventListenerList [a] .push ({Listener: b, options: c});
};  

Triển khai đoạn mã này càng sớm càng tốt trong cấu trúc trang và cơ chế tải. Ở đây, nó được chèn vào đầu
script afwk.js , tập lệnh javascript đầu tiên được tải trong trang.

Phương thức _getEventListaries

Bây giờ, mỗi loại đối tượng ( window , document , phần tử ) hiển thị đối tượng eventListenerList chứa
những người nghe đã thêm. Phương thức _getEventListaries trả về đối tượng eventListenerList được tạo.

  EventTarget.prototype._getEventListaries = function (a) {
   if (! this.eventListenerList) this.eventListenerList = {};
   if (a == undefined) {return this.eventListenerList; }
   trả về this.eventListenerList [a];
};  

Nó đã sẵn sàng:

  function _showEvents (sự kiện) {
    for (let evt of Object.keys (sự kiện)) {
        console.log (evt + "---------------- & gt;" + sự kiện [evt] .length);
        for (let i = 0; i & lt; events [evt] .length; i ++) {
          console.log (sự kiện [evt] [i] .listener.toString ());
        }
    }
  };
  
  console.log ('Sự kiện Window ====================');
  wevents = window._getEventListaries ();
  _showEvents (chúng tôi);

  console.log ('Sự kiện Div js-toc-wrap ===========');
  dv = document.getElementsByClassName ('js-toc-wrap') [0];
  dvevents = dv._getEventListaries ();
  _showEvents (dvevents); 

Sự kiện cửa sổ ====================
thay đổi kích thước ---------------- & gt; 4
function () {resize_progressread (pbar); }
function () {var t = []; r ("pre [data-line]"). forEach (function (e) {t.push (s (e))}), t.forEach (i)}
function () {Array.prototype.forEach.call (document.querySelectorAll ("pre." + l), m)}
function () {var j = new Ngày, k = b- (j-h); trả về d = this, e = đối số, k & lt; = 0? (clearTimeout (f), f = null, h = j, g = a. áp dụng (d, e)): f || (f = setTimeout (i, k + c)), g}

bản in trước ---------------- & gt; 1
hàm số() {
document.getElementById ('menu-checkbox-toc'). check = true;
Afwk.toc.div.style.position = 'static';
Afwk.toc.div.className = "js-toc-wrap";
Afwk.toc.stuck = false;
}
…
Sự kiện Div js-toc-wrap ===========

Dragend ---------------- & gt; 1
hàm (e) {
  Afwk.toc.div.style.opacity = 1;
  // Giải pháp thay thế FF, clientY không khả dụng
  posY = (e.clientY == 0)? e.screenY: e.clientY;
  Afwk.toc.div.style.top = posY + "px";
  Afwk.toc.floating.top = posY + "px";
  dwrap = document.getElementById ('bọc');
  dwrap.removeAttribute ('ondragover');
  event.preventDefault ();
  trả về sai;
}  
  • Các chức năng của một sự kiện được sắp xếp theo thứ tự tạo dấu thời gian.
  • Như mong đợi, các hàm được xác định trong thuộc tính sự kiện sẽ không được truy xuất.

Chúng tôi nhận được mã nguồn của các hàm, đó là điểm khởi đầu tốt cho các mục đích tối ưu hóa và gỡ lỗi.
Cũng có thể lấy vị trí hàm ( [[FunctionLocation]] ) nhưng chỉ trong các công cụ dành cho nhà phát triển trình duyệt bằng cách sử dụng console.log
về sự kiện:


  for (let evt of Object.keys (sự kiện)) {
      console.log (evt + "---------------- & gt;" + sự kiện [evt] .length);
      for (let i = 0; i & lt; events [evt] .length; i ++) {
        …
        console.log (sự kiện [evt] [i]);
      }
  }  

Không thể tìm thấy cách truy xuất [[FunctionLocation]] .

Danh sách sự kiện – Danh sách phiên bản được hợp nhất và cuối cùngAllEventListaries

Sau khi triển khai phương thức _getEventListaries , phiên bản hợp nhất sẽ truy xuất cả sự kiện được xác định trong thuộc tính và sự kiện
được định nghĩa bằng addEventListener . Danh sách hiện đã hoàn tất, điều đó tốt hơn cho việc gỡ lỗi.

  function listAllEventListaries () {
  const allElements = Array.prototype.slice.call (document.querySelectorAll ('*'));
  allElements.push (tài liệu);
  allElements.push (cửa sổ);
  
  const các loại = [];
  
  for (let ev in window) {
   if (/^on/.test(ev)) type [styles.length] = ev;
  }
  
  let các phần tử = [];
  for (let i = 0; i & lt; allElements.length; i ++) {
    const currentElement = allElements [i];
    
    // Sự kiện được xác định trong thuộc tính
    for (let j = 0; j & lt; styles.length; j ++) {
      
      if (typeof currentElement [type [j]] === 'function') {
        Elements.push ({
          "nút": currentElement,
          "loại": loại [j],
          "func": currentElement [type [j]]. toString (),
        });
      }
    }
    
    // Sự kiện được xác định bằng addEventListener
    if (typeof currentElement._getEventListaries === 'function') {
      evts = currentElement._getEventListaries ();
      if (Object.keys (evts) .length & gt; 0) {
        for (let evt of Object.keys (evts)) {
          for (k = 0; k & lt; evts [evt] .length; k ++) {
            Elements.push ({
              "nút": currentElement,
              "loại": evt,
              "func": evts [evt] [k] .listener.toString ()
            });
          }
        }
      }
    }
  }

  trả về các phần tử.sort ();
}  

Tùy chọn sắp xếp được sử dụng hơi khác so với trước đây khi nhận các sự kiện được xác định trong thuộc tính sự kiện. Với sắp xếp tối thiểu return Elements.sort ();
đảm bảo rằng các sự kiện được tạo bằng phương thức addEventListener được sắp xếp bằng cách tạo dấu thời gian cho một loại sự kiện: hữu ích
khi gỡ lỗi vì các hàm được kích hoạt theo thứ tự này.

  & gt; console.table (listAllEventListaries);  

Không cần thêm cột chỉ định nếu sự kiện được xác định trong một sự kiện thuộc tính hoặc thông qua addEventListener . Khi tên sự kiện
bắt đầu bằng tiền tố on , nó là một thuộc tính sự kiện.

removeEventListener và cập nhật danh sách

Việc xóa sự kiện được xác định bởi thuộc tính của nó được thực hiện bằng phương thức removeAttribute :

  dv = document.getElementById ('col-left');
dv.removeAttribute ('ondragenter');  

Trong trường hợp như vậy, không vấn đề gì: danh sách được trả về bởi listAllEventListaries được cập nhật động.

Còn các sự kiện bị xóa bằng removeEventListener thì sao, ví dụ:

  document.removeEventListener ('scroll', Afwk.lazyLoad);
window.removeEventListener ('thay đổi kích thước', Afwk.lazyLoad);
window.removeEventListener ('định hướng', Afwk.lazyLoad);
window.removeEventListener ('beforeprint', Afwk.forceLazyload);  

Danh sách được trả về bởi phương thức _getEventListaries không được cập nhật.

Nguyên mẫu phương thức removeEventListener được ghi đè như chúng ta đã làm trước đây cho phương thức addEventListener bằng cách thêm mã
để xóa sự kiện trong đối tượng eventListenerList . Đoạn mã sẽ được thêm vào càng sớm càng tốt trong cơ chế tải trang.

  EventTarget.prototype._removeEventListener = EventTarget.prototype.removeEventListener;
EventTarget.prototype.removeEventListener = function (a, b, c) {
   if (c == không xác định) c = false;
   this._removeEventListener (a, b, c);
   if (! this.eventListenerList) this.eventListenerList = {};
   if (! this.eventListenerList [a]) this.eventListenerList [a] = [];

   for (let i = 0; i & lt; this.eventListenerList [a] .length; i ++) {
      if (this.eventListenerList [a] [i] .listener == b, this.eventListenerList [a] [i] .options == c) {
          this.eventListenerList [a] .splice (i, 1);
          phá vỡ;
      }
   }
   if (this.eventListenerList [a] .length == 0) xóa this.eventListenerList [a];
};  

Kết luận

Đối với mục đích gỡ lỗi, chẩn đoán hiệu suất: việc liệt kê các sự kiện không quá tầm thường tùy thuộc vào cách chúng được xác định (thuộc tính sự kiện hoặc addEventListener ).

Hơn nữa, nó đặt ra một câu hỏi: trong giai đoạn phát triển, các thuộc tính sự kiện hoặc addEventListener / removeEventListener hay cả hai?
Tiêu chuẩn mã hóa được xác định tùy thuộc vào yêu cầu và độ phức tạp của dự án.

Một chút thất vọng, có thể ai đó có thể đưa ra giải pháp: có vẻ như không có giải pháp dễ dàng nào để truy xuất thuộc tính [[FunctionLocation]] theo chương trình.


Xem thêm những thông tin liên quan đến chủ đề danh sách javascript của trình nghe sự kiện

FINAL BOSS: DOM Manipulation & Event Listeners | Simple Javascript Training Tutorial

  • Tác giả: Powerslacker
  • Ngày đăng: 2016-11-29
  • Đánh giá: 4 ⭐ ( 7506 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: FULL CODE + IMAGES + SLIDES @ http://blog.breakthru.solutions/learn-javascript-simple-project-rock-paper-scissors

    PLAYLIST: https://www.youtube.com/playlist?list=PLRcnnTsvnkLN0VUFnWMfxhW-20pWBT4cJ

    FOLLOW ME ON TWITTER: https://twitter.com/thepowerslacker

    FURTHER READING
    Event Listeners: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

    FROM THE DOCS
    The EventTarget.addEventListener() method registers the specified listener on the EventTarget it’s called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

    Parameters

    type
    A string representing the event type to listen for.
    listener
    The object that receives a notification (an object that implements the Event interface) when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function.
    options Optional
    An options object that specifies characteristics about the event listener. The available options are:
    capture: A Boolean that indicates that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
    once: A Boolean indicating that the listener should be invoked at most once after being added. If it is true, the listener would be removed automatically when it is invoked.
    passive: A Boolean indicating that the listener will never call preventDefault(). If it does, the user agent should ignore it and generate a console warning.
    mozSystemGroup: Available only in code running in XBL or in Firefox’ chrome, it is a Boolean defining if the listener is added to the system group.

Cách thêm trình xử lý sự kiện vào nhiều phần tử trong JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 2060 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

[Tự học Javascript] Giới thiệu về các sự kiện(event) trình duyệt

  • Tác giả: cafedev.vn
  • Đánh giá: 4 ⭐ ( 4851 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay cafedev chia sẻ cho ace về sự kiện trong trình duyệt. Một sự kiện là một tín hiệu cho thấy điều gì đó đã xảy ra. Tất cả các nút DOM đều tạo ra các tín hiệu như vậy (nhưng các sự kiện không giới hạn ở DOM).

[JavaScript] Bài 13 – Event & Listener

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 7694 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta sẽ quay lại với chủ đề về các sự kiện event được tạo ra bởi thao tác của người dùng trong môi trường trình duyệt web. Lần trước, sau khi thảo luận xong về object document,…

Sự kiện (Event) trong HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 4 ⭐ ( 5285 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi người sử dụng vào trang web của bạn, họ làm những việc như nhấn chuột vào các đường link, văn bản và hình ảnh…. Đó là những sự kiện (event) trong HTML

Xử lý sự kiện (Event) trong Javascript

  • Tác giả: openplanning.net
  • Đánh giá: 3 ⭐ ( 4582 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sự kiện (Event) trong javascript là gì ? Các sự kiên hay sử dụng nhất

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 4 ⭐ ( 3068 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự kiện (Event) trong javascript sẽ giúp chúng ta có những hiệu ứng thật cool ngầu trên một webstie. Vậy sự kiện là gì nhỉ ? Xin chào mọi …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php