[Javascript] – Phần 16: Sự kiện (event) trong Javascript

Sự kiện JavaScript (JavaScript events) là các hành động hoặc trạng thái xảy ra trong trình duyệt, như nhấn chuột, gõ phím, thay đổi kích thước cửa sổ hoặc tải trang web. JavaScript cho phép bạn theo dõi và phản ứng lại các sự kiện này để thực hiện các hành động cụ thể khi chúng xảy ra. Điều này làm cho trang web của bạn trở nên tương tác và đáp ứng hơn đối với người dùng.

Dưới đây là một số khái niệm cơ bản về sự kiện JavaScript:

• Sự kiện (Event): Sự kiện là một hành động hoặc điều kiện xảy ra trong trình duyệt, như click chuột, gõ phím, hover, thay đổi giá trị input và nhiều sự kiện khác.
• Sự kiện người dùng (User Events): Đây là các sự kiện do người dùng thực hiện, chẳng hạn như click chuột, gõ phím hoặc di chuyển chuột.
• Xử lý sự kiện (Event Handling): Xử lý sự kiện là quá trình đính kèm code JavaScript để thực thi khi một sự kiện cụ thể xảy ra. Điều này cho phép bạn định rõ hành động cần thực hiện khi sự kiện xảy ra.
• Ngăn chặn mặc định (Default Behavior): Một số sự kiện có hành vi mặc định của trình duyệt, chẳng hạn như việc submit một biểu mẫu khi người dùng nhấn Enter. Bạn có thể ngăn chặn hành vi mặc định này bằng cách sử dụng phương thức event.preventDefault().
• Sự kiện lan truyền (Event Propagation): Sự kiện có thể được truyền từ phần tử gây ra sự kiện lên đến các phần tử cha hoặc xuống đến các phần tử con trong cây DOM. Có hai giai đoạn chính trong lan truyền sự kiện: lan truyền từ trên xuống (bắt đầu từ phần tử gốc) và lan truyền từ dưới lên (bắt đầu từ phần tử mục tiêu).
• Người phát sự kiện (Event Emitter): Đôi khi, một phần tử có khả năng phát ra các sự kiện mà các phần tử khác có thể lắng nghe. Ví dụ, phần tử video có thể phát ra sự kiện “play” và “pause” mà bạn có thể lắng nghe để thực hiện các hành động tương ứng.

Dưới đây là một ví dụ cơ bản về cách xử lý một sự kiện click chuột trong JavaScript.

// Lấy phần tử HTML mà bạn muốn lắng nghe sự kiện
const button = document.getElementById('myButton');

// Đính kèm một xử lý sự kiện click vào nút
button.addEventListener('click', function() {
  alert('Button clicked!');
});

Trong ví dụ này, chúng ta sử dụng addEventListener để đính kèm một hàm xử lý sự kiện cho phần tử có ID là “myButton”.Khi nút đó được nhấn, thông báo “Button clicked!” sẽ xuất hiện.

Tùy thuộc vào sự kiện cụ thể và mục tiêu của bạn, bạn có thể thực hiện các hành động khác nhau khi xử lý sự kiện. Điều quan trọng là hiểu cách hoạt động của các sự kiện và cách sử dụng chúng để tạo trải nghiệm tương tác trên trang web của bạn.

Các sự kiện HTML là những sự kiện xảy ra hoặc hành động diễn ra trên các phần tử HTML. Các sự kiện này có thể được kích hoạt bởi nhiều yếu tố khác nhau, chẳng hạn như tương tác của người dùng hoặc các hành động của trình duyệt. Khi sử dụng JavaScript trong các trang HTML, bạn có thể “phản ứng” và xử lý các sự kiện này bằng cách thực thi code.

Bạn có thể định nghĩa trình xử lý sự kiện bằng cách sử dụng dấu ngoặc kép hoặc dấu ngoặc đơn.

Dưới đây là một ví dụ sử dụng thuộc tính onclick với dấu ngoặc kép để thực thi code JavaScript khi một nút được nhấn:

<button onclick="document.getElementById('demo').innerHTML = Date()">Bây giờ là mấy giờ?</button>

Khi người dùng nhấp vào nút này, sự kiện onclick được kích hoạt. Trong code JavaScript bên trong onclick, document.getElementById('demo').innerHTML = Date() là một đoạn code JavaScript được sử dụng để thay đổi nội dung của một phần tử có id là “demo” trên trang web.

Cụ thể, đoạn code trên sẽ lấy thời gian hiện tại thông qua Date(), sau đó gán giá trị thời gian này vào nội dung của phần tử có id là “demo”. Kết quả là, khi bạn nhấp vào nút, nội dung của phần tử “demo” sẽ được cập nhật để hiển thị thời gian hiện tại.

Bằng cách sử dụng trình xử lý sự kiện, bạn có thể tạo ra các ứng dụng web tương tác và phản hồi mà phản ánh các hành động của người dùng và các sự kiện khác xảy ra trong trình duyệt.

Ví dụ này là một ví dụ về cách sử dụng sự kiện onclick trong HTML để thay đổi nội dung của một phần tử HTML khi người dùng nhấp vào nút đó.

Khi bạn nhấp vào nút “The time is?”, sự kiện onclick được kích hoạt và code JavaScript this.innerHTML = Date() được thực thi. Code này sẽ thay đổi nội dung của phần tử <button> thành thời gian hiện tại (dưới dạng văn bản) bằng cách sử dụng hàm Date().

Nếu bạn nhấp vào nút này lúc 10:30:00 AM, nội dung của nút sẽ thay đổi thành “The time is? 10:30:00 AM”. Điều này cho phép bạn thực hiện các thao tác tương tác động với người dùng dựa trên sự kiện nhấp chuột.

<html>
  <body>
    <button onclick="this.innerHTML=Date()">The time is?</button>
  </body>
</html>

Code JavaScript thường dài hơn và để quản lý code dễ dàng hơn, thường ta sẽ thấy sử dụng các thuộc tính sự kiện để gọi các hàm, thay vì viết code JavaScript trực tiếp trong thuộc tính sự kiện.

Ví dụ sau minh họa việc sử dụng thuộc tính onclick để gọi hàm displayDate() khi người dùng nhấn vào nút:

<html>
  <body>
    <button onclick="displayDate()">The time is?</button>
    <script>
    function displayDate() {
      document.getElementById("demo").innerHTML = Date();
    }
    </script>
    <p id="demo"></p>
  </body>
</html> 

Khi bạn nhấp vào nút “The time is?”, sự kiện onclick được kích hoạt và hàm displayDate() được gọi. Hàm này thường sẽ thực hiện một số thao tác cụ thể, trong trường hợp này, có thể là hiển thị thời gian hiện tại.

Việc sử dụng hàm displayDate() thay vì trực tiếp viết code JavaScript trong thuộc tính onclick giúp tạo code JavaScript dễ đọc hơn và dễ bảo trì hơn, đặc biệt khi bạn cần sử dụng nhiều dòng code hoặc sử dụng code này ở nhiều nơi khác nhau trong tài liệu HTML.

Dưới đây là một số sự kiện HTML thường gặp.

• onchange: Sự kiện này xảy ra khi một phần tử HTML có sự thay đổi. Thường được sử dụng cho các trường nhập liệu như ô input hoặc menu dropdown để theo dõi sự thay đổi giá trị.
• onclick: Sự kiện này xảy ra khi người dùng nhấp chuột vào một phần tử HTML, chẳng hạn như một nút hoặc liên kết. Đây là sự kiện phổ biến để thực hiện các hành động khi người dùng tương tác với trang web.
• onmouseover: Sự kiện này xảy ra khi người dùng di chuyển chuột qua một phần tử HTML. Thường được sử dụng để tạo hiệu ứng khi con trỏ chuột đi qua một phần tử.
• onmouseout: Sự kiện này xảy ra khi người dùng di chuyển chuột ra khỏi một phần tử HTML. Thường được sử dụng để tạo hiệu ứng khi con trỏ chuột rời khỏi một phần tử.
• onkeydown: Sự kiện này xảy ra khi người dùng nhấn một phím trên bàn phím. Điều này có thể được sử dụng để theo dõi và xử lý các phím được nhấn, chẳng hạn như phím mũi tên hoặc Enter.
• onload: Sự kiện này xảy ra khi trình duyệt đã hoàn tất việc tải trang web. Nó thường được sử dụng để thực hiện các tác vụ sau khi toàn bộ trang web đã được tải, chẳng hạn như khởi động các script hoặc tải dữ liệu từ máy chủ.

Trình điều khiển sự kiện trong JavaScript là cách chúng ta xử lý và kiểm tra đầu vào từ người dùng, các hành động của họ và các hành động của trình duyệt.

Dưới đây là một số cách chúng ta có thể sử dụng để làm việc với các sự kiện trong JavaScript:

• Thuộc tính sự kiện HTML: Chúng ta có thể sử dụng các thuộc tính sự kiện trong thẻ HTML để thực thi code JavaScript trực tiếp khi sự kiện xảy ra. Ví dụ, onclick sẽ thực thi code khi người dùng nhấp vào một phần tử.
• Gọi các hàm JavaScript từ thuộc tính sự kiện HTML: Chúng ta có thể gọi các hàm JavaScript từ các thuộc tính sự kiện HTML. Ví dụ, khi người dùng nhấp vào một nút, chúng ta có thể gọi một hàm JavaScript bằng cách sử dụng thuộc tính onclick.
• Gán các hàm xử lý sự kiện tùy chỉnh: Chúng ta có thể gán các hàm xử lý sự kiện tùy chỉnh cho các phần tử HTML bằng cách sử dụng JavaScript. Ví dụ, bằng cách sử dụng addEventListener, chúng ta có thể gán một hàm để xử lý sự kiện khi người dùng nhấp chuột vào một phần tử.
• Ngăn chặn sự kiện: Chúng ta có thể ngăn chặn các sự kiện khỏi việc gửi hoặc xử lý bằng cách sử dụng các phương thức như preventDefault. Điều này có thể được sử dụng để kiểm tra và ngăn chặn các hành động không mong muốn.

Với các cách làm này, chúng ta có thể tương tác với người dùng và kiểm soát hành vi của trang web dựa trên các sự kiện mà họ thực hiện.