HomeLập trìnhJavaScriptTrình xử lý...

Trình xử lý sự kiện JavaScript – Cách xử lý sự kiện trong JS


sự kiện là gì?

Sự kiện là các hành động xảy ra khi người dùng tương tác với trang – như nhấp vào một thành phần, nhập vào trường hoặc tải trang.

Trình duyệt thông báo cho hệ thống rằng có điều gì đó đã xảy ra và nó cần được xử lý. Nó được xử lý bằng cách đăng ký một chức năng, được gọi là một event handlerlắng nghe một loại sự kiện cụ thể.

“Xử lý một sự kiện” có nghĩa là gì?

Nói một cách đơn giản, hãy xem xét điều này – giả sử bạn quan tâm đến việc tham dự các sự kiện gặp gỡ về Phát triển Web trong cộng đồng địa phương của bạn.

Để làm điều này, bạn đăng ký một buổi họp mặt địa phương có tên “Phụ nữ viết mã” và đăng ký nhận thông báo. Bằng cách này, bất cứ khi nào một buổi gặp mặt mới được lên lịch, bạn sẽ nhận được thông báo. Đó là xử lý sự kiện!

“Sự kiện” ở đây là một cuộc gặp gỡ JS mới. Khi một meetup mới được đăng tải, website meetup.com sẽ nắm bắt được sự thay đổi này, từ đó “xử lý” sự kiện này. Sau đó, nó sẽ thông báo cho bạn, do đó thực hiện một “hành động” đối với sự kiện.

Trong một trình duyệt, các sự kiện được xử lý tương tự. Trình duyệt phát hiện một thay đổi và cảnh báo một chức năng (trình xử lý sự kiện) đang lắng nghe một sự kiện cụ thể. Các chức năng này sau đó thực hiện các hành động như mong muốn.

Đọc thêm  Đảo ngược chuỗi trong JavaScript – Đảo ngược chuỗi bằng Phương thức JS .reverse()

Hãy xem xét một ví dụ về một click xử lý sự kiện:

<div class="buttons">
  <button>Press 1</button>
  <button>Press 2</button>
  <button>Press 3</button>
</div>
const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);

buttonContainer.addEventListener('click', event => {
  console.log(event.target.value)
})

Các loại sự kiện khác nhau là gì?

Một sự kiện có thể được kích hoạt bất cứ khi nào người dùng tương tác với trang. Những sự kiện này có thể là người dùng cuộn qua trang, nhấp vào một mục hoặc tải trang.

Dưới đây là một số sự kiện phổ biến – onclick dblclick mousedown mouseup mousemove keydown keyup touchmove touchstart touchend onload onfocus onblur onerror onscroll

Các giai đoạn khác nhau của sự kiện – nắm bắt, nhắm mục tiêu, bong bóng

Khi một sự kiện di chuyển qua DOM – dù đang nổi lên hay đang nhỏ giọt – nó được gọi là sự lan truyền sự kiện. Sự kiện lan truyền qua cây DOM.

Các sự kiện xảy ra theo hai giai đoạn: giai đoạn sủi bọt và giai đoạn bắt giữ.

Trong giai đoạn nắm bắt, còn được gọi là giai đoạn nhỏ giọt, sự kiện “nhỏ giọt” xuống phần tử gây ra sự kiện.

Nó bắt đầu từ phần tử cấp gốc và trình xử lý, sau đó lan truyền xuống phần tử. Giai đoạn nắm bắt được hoàn thành khi sự kiện đạt đến target.

Trong giai đoạn bong bóng, sự kiện được “tạo bong bóng” cho đến cây DOM. Đầu tiên, nó được nắm bắt và xử lý bởi trình xử lý trong cùng (trình xử lý gần nhất với phần tử mà sự kiện xảy ra). Sau đó, nó nổi lên (hoặc lan truyền lên) đến các cấp độ cao hơn của cây DOM, tiếp tục đến cha mẹ của nó và cuối cùng là gốc của nó.

Đọc thêm  JavaScript 设计模式

Cô ấy có mẹo giúp bạn ghi nhớ điều này:

trickle down, bubble up

Đây là một infographic từ quirksmode giải thích rất rõ điều này:

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

Một điều cần lưu ý là, cho dù bạn đăng ký trình xử lý sự kiện ở một trong hai giai đoạn, thì cả hai giai đoạn LUÔN LUÔN xảy ra. Tất cả các sự kiện bong bóng theo mặc định.

Bạn có thể đăng ký trình xử lý sự kiện cho pha, bong bóng hoặc chụp bằng cách sử dụng chức năng addEventListener(type, listener, useCapture). Nếu useCapture được đặt thành false, trình xử lý sự kiện đang ở giai đoạn bong bóng. Nếu không, nó đang trong giai đoạn chụp.

Thứ tự của các giai đoạn của sự kiện phụ thuộc vào trình duyệt.

Để kiểm tra trình duyệt nào ưu tiên chụp trước, bạn có thể thử đoạn mã sau trong JSfiddle:

<div id="child-one">
    <h1>
      Child One
    </h1>
  </div>

const childOne = document.getElementById("child-one");

const childOneHandler = () => {
console.log('Captured on child one')
}

const childOneHandlerCatch = () => {
console.log('Captured on child one in capture phase')
}

childOne.addEventListener("click", childOneHandler); 
childOne.addEventListener("click", childOneHandlerCatch, true); 

Trong Firefox, Safari và Chrome, đầu ra như sau:
Các sự kiện trong giai đoạn chụp được kích hoạt trước

Làm thế nào để lắng nghe một sự kiện

Có hai cách để lắng nghe một sự kiện:

  1. addEventListener
  2. sự kiện nội tuyến, chẳng hạn như onclick
//addEventListener
document.getElementByTag('a').addEventListener('click', onClickHandler);

//inline using onclick
<a href="#" onclick="onClickHandler">Click me</a>

Cái nào tốt hơn – một sự kiện nội tuyến hoặc addEventListener?

  1. addEventListener cung cấp cho bạn khả năng đăng ký trình xử lý sự kiện không giới hạn.
  2. removeEventListener cũng có thể được sử dụng để loại bỏ trình xử lý sự kiện
  3. Các useCapture cờ có thể được sử dụng để cho biết liệu một sự kiện có cần được xử lý trong giai đoạn nắm bắt hay giai đoạn kết hợp hay không.
Đọc thêm  Đợi JavaScript – Cách ngủ N giây trong JS với .setTimeout()

Ví dụ mã và live-action

Bạn có thể thử các sự kiện này trong JSFiddle để chơi với chúng.

<div id="wrapper-div">
  <div id="child-one">
    <h1>
      Child One
    </h1>
  </div>
  <div id="child-two" onclick="childTwoHandler">
    <h1>
      Child Two
    </h1>
  </div>

</div>

const wrapperDiv = document.getElementById("wrapper-div");
const childOne = document.getElementById("child-one");
const childTwo = document.getElementById("child-two");

const childOneHandler = () => {
console.log('Captured on child one')
}

const childTwoHandler = () => {
console.log('Captured on child two')
}

const wrapperDivHandler = () => {
console.log('Captured on wrapper div')
}

const childOneHandlerCatch = () => {
console.log('Captured on child one in capture phase')
}

const childTwoHandlerCatch = () => {
console.log('Captured on child two in capture phase')
}

const wrapperDivHandlerCatch = () => {
console.log('Captured on wrapper div in capture phase')
}


childOne.addEventListener("click", childOneHandler); 
childTwo.addEventListener("click", childTwoHandler); 
wrapperDiv.addEventListener("click", wrapperDivHandler); 

childOne.addEventListener("click", childOneHandlerCatch, true); 
childTwo.addEventListener("click", childTwoHandlerCatch, true); 
wrapperDiv.addEventListener("click", wrapperDivHandlerCatch, true); 

TL;DR

Các giai đoạn sự kiện là chụp (DOM -> mục tiêu), bong bóng (mục tiêu-> DOM) và mục tiêu.
Sự kiện có thể được lắng nghe bằng cách sử dụng addEventListener hoặc các phương pháp nội tuyến như onclick.

    addEventListener can add multiple events, whereas with onclick this cannot be done.
    onclick can be added as an HTML attribute, whereas an addEventListener can only be added within <script> elements.
    addEventListener can take a third argument which can stop the event propagation.

đọc thêm

https://www.quirksmode.org/js/events_order.html
https://jsfiddle.net/r2bc6axg/
https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick
https://www.w3.org/wiki/HTML/Attributes/_Global#Event-handler_Attributes

Để theo kịp các hướng dẫn ngắn hơn như thế này, hãy đăng ký nhận bản tin của tôi hoặc theo dõi tôi trên Twitter





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status