Xử lý sự kiện (Event Handlers) trong JavaScript là gì?

JavaScript tương tác với HTML thông qua các sự kiện xảy ra khi người dùng hoặc trình duyệt thao tác với trang web.

Khi trang web tải xong, đó là một sự kiện. Khi người dùng nhấp chuột vào nút bấm, cú nhấp chuột đó cũng là một sự kiện. Các ví dụ khác bao gồm: nhấn phím, đóng cửa sổ, thay đổi kích thước cửa sổ, v.v.

Các loại sự kiện phổ biến

1. Sự kiện onclick

Đây là loại sự kiện được sử dụng nhiều nhất, xảy ra khi người dùng nhấp chuột trái. Bạn có thể gắn các hàm kiểm tra dữ liệu, cảnh báo, v.v. vào sự kiện này.

Ví dụ:

<html>
  <head>
    <script>
      function sayHello() {
        alert("Hello World");
      }
    </script>
  </head>
  <body>
    <p>Nhấp vào nút bên dưới để xem kết quả</p>
    <form>
      <input type="button" onclick="sayHello()" value="Say Hello" />
    </form>
  </body>
</html>

2. Sự kiện onmouseover và onmouseout

Hai sự kiện này giúp tạo hiệu ứng đẹp mắt cho hình ảnh hoặc văn bản. onmouseover kích hoạt khi di chuột vào phần tử, onmouseout kích hoạt khi di chuột ra khỏi phần tử.

Ví dụ:

<html>
  <head>
    <script>
      function over() {
        document.write("Mouse Over");
      }
      function out() {
        document.write("Mouse Out");
      }
    </script>
  </head>
  <body>
    <p>Di chuột vào khu vực bên dưới để xem kết quả:</p>
    <div onmouseover="over()" onmouseout="out()">
      <h2>Đây là bên trong khu vực div</h2>
    </div>
  </body>
</html>