Về event (sự kiện) trong Javascript

Event là gì?

Khi người dùng hay trình duyệt tương tác với trang sẽ tạo ra event. Javascript cung cấp cho chúng ta những phương pháp để quản lý các event này.

Ví dụ, khi một trang web được load, nó sẽ tạo ra một event. Hay khi người dùng click vào một button, nó cũng sẽ tạo ra một event. Sau đây chúng ta thử tìm hiểu một số event trong Javascript, cách nó hoạt động và cách chúng ta handle nó nha.

Một số ví dụ về event trong Javascript

onclick

Đây là event xảy ra khi người dùng click chuột trái vào một đối tượng trên trang web. Và chúng ta dùng onclick để handle event đó.

Ví dụ

<html>
  <head>
    <script type="text/javascript">
      function sayHello() {
        alert("Hello World");
      }
    </script>
  </head>
  <body>
    <p>Click the following button and see result</p>
    <form>
      <input type="button" onclick="sayHello()" value="Say Hello" />
    </form>
  </body>
</html>

Kết quả

event-trong-javascript-anh1

onsubmit

Để tạo được event này thì đầu tiên trên trang web phải có một cái form, bên trong form phải có nút submit. Khi chúng ta nhấn vào nút submit thì sẽ tạo ra event submit. Tương tự như onclick thì onsubmit được dùng để handle event submit.

Ví dụ

<html>
  <head>
  <script type="text/javascript">
    function validation() {
      alert("Form is ok");
      return false;
    }
  </script>
  </head>
  <body>
  <form action=" onsubmit="return validation();">
    <input type="submit" value="Submit" />
  </form>
  </body>
</html>

Kết quả

event-trong-javascript-anh2

onmouseover và onmouseout

Mouseover và mouseout là hay event xảy ra lần lượt khi người dùng đưa chuột vào đối tượng và đưa chuột ra khỏi đối tượng trên trang web. Onmouseover và onmouseout được dùng để handle 2 event tương ứng.

<html>
  <head>
    <script type="text/javascript">
      function over() {
        console.log("Mouse Over");
      }
      function out() {
        console.log("Mouse Out");
      }
    </script>
  </head>
  <body>
    <p>Bring your mouse inside the division to see the result:</p>
    <div onmouseover="over()" onmouseout="out()">
      <h2> This is inside the division </h2>
    </div>
  </body>
</html>

Kết quả

event-trong-javascript-anh3

Danh sách tổng hợp event

Trên đây chỉ là một số ví dụng về các event có trong Javascript. Chi tiết tham khảo thêm tại W3School.

Nếu các bạn thấy bài viết hữu ích thì ủng hộ website bằng một like bên tay trái nha. Cảm ơn các bạn.

>> Xem thêm: Câu lệnh rẽ nhánh switch..case trong Javascript

>> Xem thêm: Vòng lặp while trong Javascript

Bình luận