HomeLập trìnhJavaScriptSự kiện trình...

Sự kiện trình duyệt được giải thích bằng tiếng Anh đơn giản


sự kiện trình duyệt là gì?

Một sự kiện đề cập đến một hành động hoặc sự kiện xảy ra trong hệ thống mà bạn đang lập trình. Sau đó, hệ thống sẽ thông báo cho bạn về sự kiện để bạn có thể phản hồi theo cách nào đó nếu cần.

Trong bài viết này, tôi sẽ tập trung vào các sự kiện trong ngữ cảnh của trình duyệt web. Về cơ bản, một sự kiện là một chỉ báo cho thấy một hành động nhất định đã diễn ra để bạn có thể đưa ra phản hồi thích hợp.

Để minh họa điều tôi đang nói, hãy tưởng tượng rằng bạn đang đứng ở vạch kẻ đường dành cho người đi bộ chờ đèn giao thông chuyển để bạn có thể sang đường an toàn. Sự kiện là sự thay đổi đèn giao thông khiến bạn sau đó thực hiện một hành động – trong trường hợp này là băng qua đường.

Tương tự như vậy trong quá trình phát triển web, chúng ta có thể thực hiện một hành động bất cứ khi nào một sự kiện mà chúng ta quan tâm diễn ra.

Một số sự kiện phổ biến mà bạn có thể gặp phải trong quá trình phát triển web bao gồm:

  1. sự kiện chuột
  • click
  • dblclick
  • mousemove
  • mouseover
  • mousewheel
  • mouseout
  • contextmenu
  • mousedown
  • mouseup

2. Sự kiện chạm

  • touchstart
  • touchmove
  • touchend
  • touchcancel

3. Sự kiện bàn phím

4. Hình thức sự kiện

5. Sự kiện cửa sổ

  • scroll
  • resize
  • hashchange
  • load
  • unload

Để biết danh sách đầy đủ các sự kiện và các danh mục khác nhau mà chúng thuộc về, bạn có thể xem tài liệu MDN. Một số sự kiện được liệt kê là sự kiện tiêu chuẩn trong thông số kỹ thuật chính thức, trong khi những sự kiện khác là sự kiện được sử dụng nội bộ bởi các trình duyệt cụ thể.

Trình xử lý sự kiện là gì?

Như đã đề cập ở trên, chúng tôi theo dõi các sự kiện để bất cứ khi nào chúng tôi nhận được thông báo rằng sự kiện đã xảy ra, chương trình có thể thực hiện hành động thích hợp.

Hành động này thường được thực hiện trong các chức năng được gọi là xử lý sự kiện mà còn được gọi là người nghe sự kiện. Nếu một sự kiện xảy ra và trình xử lý sự kiện được gọi, chúng tôi nói rằng một sự kiện đã được đăng ký. Điều này được minh họa trong đoạn mã dưới đây.

Nếu nút với id btn được nhấp, trình xử lý sự kiện được gọi và một cảnh báo có nội dung “Nút đã được nhấp” được hiển thị. Các onclick thuộc tính đã được gán cho một chức năng là trình xử lý sự kiện. Đây là một trong ba cách để thêm trình xử lý sự kiện vào phần tử DOM.

const button = document.getElementById("btn");
button.onclick = function(){
   alert("Button has been clicked");
}

Điều đáng nói là xử lý sự kiện hầu hết được khai báo dưới dạng các hàm, nhưng chúng cũng có thể là các đối tượng.

Đọc thêm  Bản đồ JavaScript() 方法解析

Cách gán trình xử lý sự kiện

Có nhiều cách để đính kèm trình xử lý sự kiện vào phần tử HTML. Chúng ta sẽ thảo luận về các phương pháp này, cùng với ưu và nhược điểm của chúng bên dưới.

Chỉ định trình xử lý sự kiện với thuộc tính HTML

Đây là cách dễ nhất để đính kèm một trình xử lý sự kiện vào các phần tử HTML, mặc dù đây là cách ít được khuyến nghị nhất. Nó liên quan đến việc sử dụng thuộc tính sự kiện HTML nội tuyến có tên on<event> có giá trị là trình xử lý sự kiện. Ví dụ onclick, onchange, onsubmit và như thế.

Hãy lưu ý rằng không có gì lạ khi tìm thấy các thuộc tính sự kiện HTML có tên onClick, onChange hoặc onSubmit bởi vì các thuộc tính HTML không phân biệt chữ hoa chữ thường. Về cơ bản, nó đúng về mặt cú pháp để sử dụng onclick, onClick hoặc ONCLICK. Nhưng thông thường người ta thường để nó ở dạng chữ thường.

<button onclick = "alert('Hello world!')"> Click Me </button>
<button onclick = "(() => alert('Hello World!'))()"> Click Me Too </button>
<button onclick = "(function(){alert('Hello World!')})()"> And Me </button>

Trong ví dụ trên, mã JavaScript đã được gán theo nghĩa đen cho thuộc tính sự kiện HTML.

Lưu ý định dạng Biểu thức hàm được gọi ngay lập tức (IIFE) trong hai phần cuối button phần tử. Mặc dù điều này có vẻ dễ dàng và đơn giản, nhưng việc gán một thuộc tính sự kiện HTML nội tuyến là không hiệu quả và khó bảo trì.

Giả sử bạn có hơn 20 nút như vậy trong phần đánh dấu của mình. Sẽ rất lặp đi lặp lại khi viết cùng một mã JavaScript cho mỗi nút. Tốt hơn hết là viết JavaScript trong tệp riêng của nó để bạn có thể dễ dàng sử dụng cùng một mã cho nhiều tệp HTML.

Bên cạnh đó, bạn không thể có nhiều dòng mã JavaScript nội tuyến. Mã JavaScript nội tuyến được coi là chống mẫu do những lý do đã nói ở trên. Vì vậy, hãy cố gắng tránh nó trừ khi bạn đang thử một cái gì đó nhanh chóng.

Khai báo một trình xử lý sự kiện trong một script nhãn

Thay vì làm như trên, bạn cũng có thể khai báo trình xử lý sự kiện trong một script thẻ và gọi nó nội tuyến như hình dưới đây.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/javascript-events-explained-in-simple-english/./index.css" type="text/css" />
    <script>
      function onClickHandler(){
         alert("Hello world!");
       }
    </script> 
  </head>
  <body>
    <div class="wrapper">
       <button onclick = "onClickHandler()"> Click me </button>
    </div>
  </body>
</html>

Tuy nhiên, hãy lưu ý rằng chỉ cần gán tên hàm làm giá trị của thuộc tính sự kiện HTML như onclick = "onClickHandler" sẽ không làm việc. Bạn cần gọi nó như được hiển thị ở trên, kèm theo lời gọi đó trong dấu ngoặc kép giống như giá trị của bất kỳ thuộc tính HTML nào.

Chỉ định trình xử lý sự kiện bằng thuộc tính DOM

Thay vì sử dụng thuộc tính sự kiện HTML nội tuyến được minh họa ở trên, bạn cũng có thể chỉ định trình xử lý sự kiện làm giá trị của thuộc tính sự kiện trên phần tử DOM. Điều này chỉ có thể xảy ra bên trong một script thẻ hoặc trong tệp JavaScript.

Đọc thêm  Hướng dẫn nhanh chóng và đơn giản về Biểu thức chính quy JavaScript

Một hạn chế của phương pháp này là bạn không thể có nhiều trình xử lý sự kiện cho cùng một sự kiện. Nếu bạn có nhiều trình xử lý cho cùng một sự kiện, như minh họa bên dưới, thì chỉ trình xử lý cuối cùng sẽ được áp dụng. Những cái khác sẽ bị ghi đè.

const button = document.getElementById("btn");
button.onclick = function(){
   alert("Button has been clicked");
}
// Only this is applied
button.onclick = function(){
   console.log("Button has been clicked");
}

Nếu bạn muốn xóa trình xử lý sự kiện khỏi onclick sự kiện, bạn chỉ cần gán lại button.onclick đến null.

button.onclick = null

Cách cải thiện phương pháp DOM để thêm trình xử lý sự kiện

Phương pháp thêm trình xử lý sự kiện ở trên tốt hơn là sử dụng JavaScript nội tuyến. Tuy nhiên, nó có một hạn chế là hạn chế một phần tử chỉ có một trình xử lý sự kiện cho mỗi sự kiện.

Ví dụ: bạn không thể áp dụng nhiều trình xử lý sự kiện cho một sự kiện nhấp chuột trên một phần tử.

Để khắc phục hạn chế này, addEventListenerremoveEventListener đã được giới thiệu. Điều này cho phép bạn thêm nhiều trình xử lý sự kiện cho cùng một sự kiện trên cùng một phần tử.

const button = document.getElementById('btn');
button.addEventListener('click', () => {
  alert('Hello World');
})
button.addEventListener('click', () => {
  console.log('Hello World');
})

Trong đoạn mã trên, một phần tử với id btn được chọn và sau đó được theo dõi trong một click event bằng cách đính kèm hai trình xử lý sự kiện. Trình xử lý sự kiện đầu tiên sẽ được gọi và một thông báo cảnh báo về Hello World bật lên. sau đó Hello World cũng sẽ được đăng nhập vào bảng điều khiển.

Như bạn có thể nhận thấy từ các ví dụ trên, chữ ký hàm của element.addEventListener Là:

element.addEventListener(event, eventHandler, [optional parameter])

Các thông số để addEventListener phương pháp

  1. Sự kiện

Tham số đầu tiên, event (là tham số bắt buộc) là một chuỗi chỉ định tên của sự kiện. Ví dụ "click", "mouseover", "mouseout" và như thế.

2. xử lý sự kiện

Tham số thứ hai, giống như tham số đầu tiên cũng được yêu cầu, là một hàm được gọi khi sự kiện xảy ra. Một đối tượng sự kiện được truyền dưới dạng tham số đầu tiên của nó. Đối tượng sự kiện phụ thuộc vào loại sự kiện. Ví dụ, một MouseEvent đối tượng được thông qua cho một sự kiện nhấp chuột.

3. tham số tùy chọn

Tham số thứ ba, là một tham số tùy chọn, là một đối tượng có các thuộc tính:

  • once: Giá trị của nó là một boolean. Nếu truetrình nghe sẽ bị xóa sau khi nó kích hoạt.
  • capture: Giá trị của nó cũng là một boolean. Nó đặt giai đoạn mà nó sẽ xử lý sự kiện, đó là giai đoạn sủi bọt hoặc bắt giữ. Giá trị mặc định là false , do đó, sự kiện được ghi lại trong giai đoạn sủi bọt. Bạn có thể đọc thêm về nó ở đây. Vì lý do lịch sử, các tùy chọn cũng có thể được true hoặc false.
  • passive: Giá trị của nó cũng là một boolean. Nếu nó là truethì trình xử lý sẽ không gọi preventDefault(). preventDefault() là một phương thức của đối tượng sự kiện.
Đọc thêm  Hướng dẫn thử thách freeCodeCamp: Tìm phần còn lại trong JavaScript - Hướng dẫn

Tương tự nếu bạn muốn ngừng theo dõi click sự kiện, bạn có thể sử dụng element.removeEventListener. Nhưng điều này chỉ hoạt động nếu người nghe sự kiện đã được đăng ký bằng cách sử dụng element.addEventListener. Chữ ký chức năng tương tự như của element.addEventListener.

element.removeEventListener(event, eventHandler, [options])

Để chúng tôi sử dụng element.removeEventListener để loại bỏ một eventhàm được truyền dưới dạng đối số thứ hai cho element.addEventListener phải là một chức năng được đặt tên khi thêm trình xử lý sự kiện. Điều này đảm bảo rằng chức năng tương tự có thể được chuyển đến element.removeEventListener nếu chúng ta muốn loại bỏ nó.

Điều đáng nói ở đây là, nếu bạn đã chuyển các đối số tùy chọn cho trình xử lý sự kiện, thì bạn cũng phải chuyển các đối số tùy chọn tương tự cho trình xử lý sự kiện. removeEventListener.

const button = document.getElementById('btn');
button.removeEventListener('click', clickHandler)

Đối tượng sự kiện là gì?

Trình xử lý sự kiện có một tham số được gọi là đối tượng sự kiện chứa thông tin bổ sung về sự kiện.

Các thông tin được lưu trữ trong đối tượng sự kiện phụ thuộc vào loại sự kiện. Ví dụ, các đối tượng sự kiện chuyển đến một click trình xử lý sự kiện có một thuộc tính được gọi là target tham chiếu đến phần tử mà từ đó sự kiện nhấp chuột bắt nguồn.

Trong ví dụ bên dưới, nếu bạn nhấp vào phần tử có id btn, event.target sẽ tham khảo nó. Tất cả các trình xử lý sự kiện nhấp chuột được thông qua một đối tượng sự kiện với target tài sản. Như đã chỉ ra, các sự kiện khác nhau có đối tượng sự kiện tham số lưu trữ thông tin khác nhau.

const button = document.getElementById("btn");
button.addEventListener("click", event => {
  console.log(event.target);
})

Giá trị của this

Trong một event xử lý, giá trị của this là phần tử mà trình xử lý sự kiện được đăng ký. Hãy lưu ý rằng phần tử mà trình xử lý sự kiện được đăng ký có thể không nhất thiết phải giống với phần tử mà sự kiện xảy ra.

Ví dụ: trong mã bên dưới, trình xử lý sự kiện được đăng ký trên trình bao bọc. Thông thường, giá trị của this giống như event.currentTarget. Nếu bạn bấm vào buttongiá trị của this phía trong onClickHandlerdiv không phải button bởi vì nó là div trên đó trình xử lý sự kiện được đăng ký mặc dù nhấp chuột bắt nguồn từ nút.

cái này gọi là event propagation. Đó là một khái niệm rất quan trọng mà bạn có thể đọc ở đây nếu bạn quan tâm.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/javascript-events-explained-in-simple-english/./index.css" type="text/css" />
    <script>
      function onClickHandler(){
         console.log(this)
         alert("Hello world!");
       }
       const wrapper = document.querySelector(".wrapper");
       wrapper.addEventListener("click", onClickHandler);
    </script> 
  </head>
  <body>
    <div class="wrapper">
       <button> Click me </button>
    </div>
  </body>
</html>

Phần kết luận

Trong bài viết này, chúng tôi đã xem xét:

  • Sự kiện trình duyệt và chúng là gì
  • Các cách khác nhau để thêm trình xử lý sự kiện vào các phần tử DOM
  • Tham số đối tượng sự kiện cho trình xử lý sự kiện
  • Giá trị của this trong một trình xử lý sự kiện



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