Phái đoàn sự kiện – mục tiêu sự kiện khớp với javascript

Bạn đang xem : đối sánh mục tiêu sự kiện với javascript

Việc nắm bắt và tạo bọt cho phép chúng tôi triển khai một trong những mẫu xử lý sự kiện mạnh mẽ nhất được gọi là ủy quyền sự kiện.

Ý tưởng là nếu chúng ta có nhiều phần tử được xử lý theo cách giống nhau, thì thay vì chỉ định một trình xử lý cho từng phần tử trong số chúng – chúng tôi đặt một trình xử lý duy nhất trên tổ tiên chung của chúng.

Trong trình xử lý, chúng tôi nhận được event.target để xem nơi thực sự xảy ra sự kiện và xử lý sự kiện đó.

Hãy xem một ví dụ – sơ đồ Ba-gua phản ánh triết học cổ đại của Trung Quốc.

Đây rồi:

HTML giống như sau:

  & lt; table & gt;
  & lt; tr & gt;
    & lt; th colspan = "3" & gt; & lt; em & gt; Bát quái & lt; / em & gt; Biểu đồ: Hướng, Yếu tố, Màu sắc, Ý nghĩa & lt; / th & gt;
  & lt; / tr & gt;
  & lt; tr & gt;
    & lt; td class = "nw" & gt; & lt; strong & gt; Northwest & lt; / strong & gt; & lt; br & gt; Metal & lt; br & gt; Silver & lt; br & gt; Elders & lt; / td & gt;
    & lt; td class = "n" & gt; ... & lt; / td & gt;
    & lt; td class = "ne" & gt; ... & lt; / td & gt;
  & lt; / tr & gt;
  & lt; tr & gt; ... 2 dòng nữa thuộc loại này ... & lt; / tr & gt;
  & lt; tr & gt; ... 2 dòng nữa thuộc loại này ... & lt; / tr & gt;
& lt; / table & gt;  

Bảng có 9 ô, nhưng có thể có 99 hoặc 9999, không thành vấn đề.

Nhiệm vụ của chúng tôi là đánh dấu một ô & lt; td & gt; khi nhấp chuột.

Thay vì chỉ định một trình xử lý onclick cho mỗi & lt; td & gt; (có thể là nhiều) – chúng tôi sẽ thiết lập trình xử lý “bắt tất cả” trên Phần tử & lt; table & gt; .

Nó sẽ sử dụng event.target để lấy phần tử được nhấp và đánh dấu phần tử đó.

Mã:

  let selectTd;

table.onclick = function (event) {
  let target = event.target; // nhấp chuột ở đâu?

  if (target.tagName! = 'TD') return; // không có trên TD? Vậy thì chúng tôi không quan tâm

  làm nổi bật (mục tiêu); // đánh dấu nó
};

chức năng tô sáng (td) {
  if (selectTd) {// xóa phần đánh dấu hiện có nếu có
    selectTd.classList.remove ('highlight');
  }
  selectTd = td;
  selectTd.classList.add ('highlight'); // đánh dấu td mới
}  

Mã như vậy không quan tâm có bao nhiêu ô trong bảng. Chúng tôi có thể thêm / xóa & lt; td & gt; động bất kỳ lúc nào và tính năng đánh dấu sẽ vẫn hoạt động.

Tuy nhiên, vẫn có một nhược điểm.

Nhấp chuột có thể xảy ra không phải trên & lt; td & gt; mà ở bên trong nó.

Trong trường hợp của chúng tôi, nếu chúng tôi nhìn vào bên trong HTML, chúng tôi có thể thấy các thẻ lồng nhau bên trong & lt; td & gt; , như & lt; strong & gt; :

  & lt; td & gt;
  & lt; mạnh & gt; Tây Bắc & lt; / strong & gt;
  ...
& lt; / td & gt;  

Đương nhiên, nếu một nhấp chuột xảy ra trên & lt; strong & gt; đó thì nó sẽ trở thành giá trị của event.target .

Trong trình xử lý table.onclick , chúng ta nên lấy event.target như vậy và tìm hiểu xem nhấp chuột có bên trong & lt; td & gt; hay không không.

Đây là mã được cải thiện:

  table.onclick = function (event) {
  let td = event.target.closest ('td'); // (1)

  if (! td) return; // (2)

  if (! table.contains (td)) return; // (3)

  đánh dấu (td); // (4)
};  

Giải thích:

  1. Phương thức elem.closest (selector) trả về tổ tiên gần nhất phù hợp với selector. Trong trường hợp của chúng tôi, chúng tôi tìm kiếm & lt; td & gt; trên đường đi lên từ phần tử nguồn.
  2. Nếu event.target không nằm trong bất kỳ & lt; td & gt; nào, thì cuộc gọi sẽ trả về ngay lập tức mà không cần phải làm gì.
  3. Trong trường hợp các bảng lồng nhau, event.target có thể là & lt; td & gt; , nhưng nằm ngoài bảng hiện tại. Vì vậy, chúng tôi kiểm tra xem đó có thực sự là & lt; td & gt; trong bảng của chúng tôi hay không.
  4. Và, nếu đúng như vậy, hãy đánh dấu nó.

Do đó, chúng tôi có một mã đánh dấu hiệu quả, nhanh chóng mà không cần quan tâm đến tổng số & lt; td & gt; trong bảng.

Có những cách sử dụng khác để ủy quyền sự kiện.

Giả sử, chúng tôi muốn tạo một menu có các nút “Lưu”, “Tải”, “Tìm kiếm”, v.v. Và có một đối tượng có các phương thức save , load , search … Làm cách nào để đối sánh chúng?

Xem Thêm  Căn chỉnh theo chiều dọc CSS - Cách căn giữa một Div, Văn bản hoặc Hình ảnh [Mã ví dụ] - nội dung div căn chỉnh theo chiều dọc trung tâm

Ý tưởng đầu tiên có thể là chỉ định một trình xử lý riêng cho mỗi nút. Nhưng có một giải pháp thanh lịch hơn. Chúng tôi có thể thêm một trình xử lý cho toàn bộ menu và thuộc tính data-action cho các nút có phương thức để gọi:

  & lt; button data-action = "save" & gt; Nhấp để Lưu & lt; / button & gt;  

Trình xử lý đọc thuộc tính và thực thi phương thức. Hãy xem ví dụ hoạt động:


  & lt; div id = "menu" & gt;
  & lt; button data-action = "save" & gt; Lưu & lt; / button & gt;
  & lt; button data-action = "load" & gt; Load & lt; / button & gt;
  & lt; button data-action = "search" & gt; Tìm kiếm & lt; / button & gt;
& lt; / div & gt;

& lt; script & gt;
  Menu lớp học {
    hàm tạo (elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind (this); // (*)
    }

    tiết kiệm() {
      alert ('lưu');
    }

    trọng tải() {
      alert ('đang tải');
    }

    Tìm kiếm() {
      alert ('đang tìm kiếm');
    }

    onClick (sự kiện) {
      let action = event.target.dataset.action;
      nếu (hành động) {
        hành động này]();
      }
    };
  }

  Menu (thực đơn) mới;
& lt; / script & gt;  

Xin lưu ý rằng this.onClick được liên kết với this trong (*) . Điều đó quan trọng, vì nếu không thì this bên trong nó sẽ tham chiếu đến phần tử DOM ( elem ), không phải đối tượng Menu this [action ] sẽ không phải là thứ chúng ta cần.

Vậy, ủy quyền mang lại cho chúng tôi những lợi thế nào ở đây?

  • Chúng tôi không cần viết mã để chỉ định một trình xử lý cho mỗi nút. Chỉ cần tạo một phương thức và đưa nó vào phần đánh dấu.
  • Cấu trúc HTML rất linh hoạt, chúng tôi có thể thêm / bớt các nút bất kỳ lúc nào.

Chúng tôi cũng có thể sử dụng các lớp .action-save , .action-load , nhưng thuộc tính data-action là tốt hơn về mặt ngữ nghĩa. Và chúng ta cũng có thể sử dụng nó trong các quy tắc CSS.

Chúng tôi cũng có thể sử dụng ủy quyền sự kiện để thêm “hành vi” vào các phần tử một cách khai báo, với các thuộc tính và lớp đặc biệt.

Mẫu có hai phần:

  1. Chúng tôi thêm thuộc tính tùy chỉnh vào phần tử mô tả hành vi của nó.
  2. Trình xử lý trên toàn tài liệu theo dõi các sự kiện và nếu sự kiện xảy ra trên một phần tử được phân bổ – hãy thực hiện hành động.

Ví dụ: ở đây, thuộc tính data-counter thêm một hành vi: “tăng giá trị khi nhấp chuột” vào các nút:


  Bộ đếm: & lt; input type = "button" value = "1" data-counter & gt;
Một bộ đếm khác: & lt; input type = "button" value = "2" data-counter & gt;

& lt; script & gt;
  document.addEventListener ('click', function (event) {

    if (event.target.dataset.counter! = undefined) {// nếu thuộc tính tồn tại ...
      event.target.value ++;
    }

  });
& lt; / script & gt;  

Nếu chúng ta nhấp vào một nút – giá trị của nó sẽ được tăng lên. Không phải các nút, nhưng cách tiếp cận chung mới quan trọng ở đây.

Có thể có nhiều thuộc tính với data-counter như chúng ta muốn. Chúng tôi có thể thêm những cái mới vào HTML bất cứ lúc nào. Bằng cách sử dụng ủy quyền sự kiện, chúng tôi đã “mở rộng” HTML, thêm một thuộc tính mô tả một hành vi mới.

Đối với trình xử lý cấp tài liệu – luôn addEventListener

Khi chúng tôi chỉ định một trình xử lý sự kiện cho đối tượng document , chúng tôi phải luôn sử dụng addEventListener , không phải document.on & lt; event & gt; , bởi vì cái sau sẽ gây ra xung đột: bộ xử lý mới ghi đè lên cái cũ.

Đối với các dự án thực, việc có nhiều trình xử lý trên document được đặt bởi các phần khác nhau của mã là điều bình thường.

Một ví dụ khác về hành vi. Một lần nhấp vào phần tử có thuộc tính data-toggle-id sẽ hiển thị / ẩn phần tử có id :


  & lt; button data-toggle-id = "subscribe-mail" & gt;
  Hiển thị biểu mẫu đăng ký
& lt; / nút & gt;

& lt; form id = "subscribe-mail" ẩn & gt;
  Thư của bạn: & lt; input type = "email" & gt;
& lt; / form & gt;

& lt; script & gt;
  document.addEventListener ('click', function (event) {
    let id = event.target.dataset.toggleId;
    if (! id) return;

    let elem = document.getElementById (id);

    elem.hiised =! elem.hiised;
  });
& lt; / script & gt;  

Hãy ghi nhận lại những gì chúng tôi đã làm. Bây giờ, để thêm chức năng chuyển đổi vào một phần tử – không cần biết JavaScript, chỉ cần sử dụng thuộc tính data-toggle-id .

Điều đó có thể trở nên thực sự thuận tiện – không cần viết JavaScript cho mọi phần tử như vậy. Chỉ sử dụng hành vi. Trình xử lý cấp tài liệu làm cho nó hoạt động cho bất kỳ phần tử nào của trang.

Xem Thêm  Máy Tính Thập Lục Phân - đổi hex sang dec

Chúng tôi cũng có thể kết hợp nhiều hành vi trên một phần tử.

Mẫu “hành vi” có thể là một sự thay thế cho các đoạn JavaScript nhỏ.

Phái đoàn sự kiện thực sự tuyệt vời! Đây là một trong những mẫu hữu ích nhất cho các sự kiện DOM.

Nó thường được sử dụng để thêm cùng một cách xử lý cho nhiều phần tử giống nhau, nhưng không chỉ cho điều đó.

Thuật toán:

  1. Đặt một trình xử lý duy nhất trên vùng chứa.
  2. Trong trình xử lý – kiểm tra phần tử nguồn event.target .
  3. Nếu sự kiện xảy ra bên trong một yếu tố mà chúng tôi quan tâm, thì hãy xử lý sự kiện đó.

Lợi ích:

  • Đơn giản hóa quá trình khởi tạo và tiết kiệm bộ nhớ: không cần thêm nhiều trình xử lý.
  • Ít mã hơn: khi thêm hoặc xóa các phần tử, không cần thêm / xóa các trình xử lý.
  • Sửa đổi DOM: chúng tôi có thể thêm / xóa hàng loạt các phần tử bằng innerHTML và những thứ tương tự.

Tất nhiên, ủy quyền có những hạn chế:

  • Đầu tiên, sự kiện phải sôi sục. Một số sự kiện không bong bóng. Ngoài ra, trình xử lý cấp thấp không nên sử dụng event.stopPropagation () .
  • Thứ hai, ủy quyền có thể thêm tải CPU, vì trình xử lý cấp vùng chứa phản ứng trên các sự kiện ở bất kỳ vị trí nào của vùng chứa, bất kể chúng có quan tâm đến chúng tôi hay không. Tuy nhiên, thông thường tải là không đáng kể, vì vậy chúng tôi không tính đến nó.


Xem thêm những thông tin liên quan đến chủ đề mục tiêu sự kiện khớp với javascript

JavaScript interview questions | Event propagation in JavaScript

  • Tác giả: ComScience Simplified
  • Ngày đăng: 2020-07-05
  • Đánh giá: 4 ⭐ ( 1797 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video, we continue with our javascript interview questions by getting into event propagation in javascript. We look into the basic concepts and understand how event bubbling and event capturing takes place in javascript.

    Transcript:
    Before getting into all the details about bubbling and capturing, let’s first get to know what events are in the first place.
    In the context of the dom, or the document object model, events serve as a medium for one part of it to communicate with another.

    Let’s say there is a button somewhere on a web page. Whenever a user interacts with it by clicking, hovering, dragging etc, events are generated. These events can then be listened to, and changes can be made to other part of the webpage based on what kind of event it was. Basically, any action can be performed upon triggering of the event.

    Taking example of an onclick handler in particular.

    In terms of code, it would generally look something like this.

    Here, we are telling the web page that whenever someone clicks this button, and an event gets generated, run the do something function and pass that event as an argument to it.

    Post that, whatever action that needs to be performed, can be performed inside of that function by making use of that event information that got passed to the handler.

    The web pages that we work with nowadays are quite complex.

    Let’s say that there is a button placed somewhere in there. But then, it is quite probable that the button is wrapped inside of a div, which might be a logical grouping like a form group or anything else. Also, all this would definitely be enclosed inside of the document tag that wraps the whole page.

    That means, when you are clicking on that button, you are also technically clicking inside of that div as well as any other outer layers that are enclosing the button like a form group etc all the way to the document. In other words, you are also clicking on the document whenever you click anything on the page.

    That brings up so many questions. Questions like: If we put handlers on all those entities, would all of them fire? What order would they fire in? Why do we care anyways?

    Let’s find answers to all of them. Well, some of them,
    Event propagation is the concept wherein an event propagates all the way from the top i.e document to the element that triggered that event then all the way back to the document.

    What this means is, if we put handlers on the document, the div and the button in the last example. An on click event will be triggered on all three of them in a particular order, either from the topmost to the bottomost or the other way around.

    How does JS decide which way the event propagates? Let’s find out.
    In event bubbling, when an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

    So, in case of our example, they would get fired one after the other starting from the button to the top, that is document.

    Almost all events bubble to the top by default except a few like hover. Which means almost all events start from the bottom and make their way up, so we can catch them at the most specific elements first and them move to the generic ones.

    Also, we can call a method called Stop propagation on the event instance that we get passed. This stops the event from moving on to the the next element in the chain and hence stop its propagation. But this is not advised unless you know all the consequences.
    This is a good time to talk about event dot target.

    Let’s say that we have an on click handler on the div in the example that we are considering. If, for instance, there were several buttons under that div, how would we know which of those buttons triggered the event?

    The most deeply nested element that caused the event is called a target element, accessible as event.target which comes in handy when we have a navbar menu and define a common behavior for click on any of the navbar items by writing a click handler on the entire menu and doing different things based on event.target.

    If you liked that one, do Check out my other popular videos:

    1. Learn about public-key cryptography
    https://www.youtube.com/watch?v=64DL9BNVwkU&

    2. maximum substring in a string (Google interview question)
    https://www.youtube.com/watch?v=IHsX70r-fIQ

    3. How the javascript engine works?
    https://www.youtube.com/watch?v=KM9coMpy5sQ

    4. Real time median in a stream, another google interview question
    https://www.youtube.com/watch?v=1CxyVdA_654

    5. Understand the Javascript event loop
    https://www.youtube.com/watch?v=XzXIMZMN9k4

    6. Understand Promises in javascript
    https://www.youtube.com/watch?v=gV7SaMIFyg8

    7. Git basics you must know
    https://www.youtube.com/watch?v=HDRXwokgWpo

    javascript bubbling capturing

Sự kiện trong JavaScript

  • Tác giả: itzone.com.vn
  • Đánh giá: 5 ⭐ ( 9575 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The ITZone platform Vietnam is the community for anyone interested in news, training seminars, presentations etc in the IT industry

Sự kiện trong Javascript

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 5 ⭐ ( 1526 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng bài hướng dẫn tự học Javascript này, bạn sẽ được học cách xử lý các sự kiện trong JavaScript.   Hiểu về Sự kiện và Xử lý sự kiện trong Javascript   Sự kiện là điều xảy ra khi người dùng tương tác với trang web, chẳng hạn như khi người dùng nhấp vào một liên kết hoặc button, nhập văn bản vào textbox hoặc

[UA→GA4] Mục tiêu sự kiện

  • Tác giả: support.google.com
  • Đánh giá: 4 ⭐ ( 9288 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy dùng công cụ di chuyển mục tiêu để tự động sao chép hầu hết các mục tiêu đích đến và sự kiện của tài sản Un

VueJS: Xử lý sự kiện

  • Tác giả: v1study.com
  • Đánh giá: 4 ⭐ ( 5769 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta có thể dùng directive v-on để lắng nghe các sự kiện DOM và thực thi JavaScript khi những sự kiện này được kích hoạt. Ví dụ:

Tìm hiểu sự kiện trong javascript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 2921 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mở đầu Khi làm việc với javascript thì chắc hẳn bạn phải làm quen với sự kiện (event). Vậy sự kiện là gì? Và tác dụng của sự kiện là như thế nào?

Đính kèm sự kiện vào các phần tử động trong javascript

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 1789 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Điều này là do phần tử của bạn được tạo động. Bạn nên sử dụng ủy…

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

Xem Thêm  Python - Ngày và giờ - trăn thời gian cho đến nay