Trong bài viết này hãy cùng Dạy kèm IT tìm hiểu về các cách xử lý sự kiện trong javascript nào!
Nếu bạn đang muốn theo đuổi ngành lập trình mà chưa biết bắt đầu từ đâu thì Dạy Kèm IT là sự lựa chọn tốt nhất dành cho bạn với các khóa học về lập trình 1:1 với Mentor với giá chỉ từ 3 triệu đồng trên tháng.
Liên hệ ngay qua SĐT: 0775.620.828
JavaScript là một ngôn ngữ lập trình phía client thường được sử dụng để tạo ra các tính năng tương tác trên website. Một trong những tính năng quan trọng của JavaScript là khả năng xử lý sự kiện, cho phép người dùng tương tác với trang web và thực hiện các hành động khác nhau. Trong bài viết này, chúng ta sẽ tìm hiểu cách xử lý sự kiện trong JavaScript.
Sự kiện là gì?
Sự kiện là bất kỳ hành động nào xảy ra trong trình duyệt, chẳng hạn như nhấp chuột, gõ phím hoặc thay đổi kích thước cửa sổ. Trong JavaScript, chúng ta có thể xử lý các sự kiện này và thực hiện các hành động tương ứng với chúng.
Các sự kiện được đặt tên theo cú pháp “on” + tên sự kiện, ví dụ: onclick, onkeydown, onmouseover,… Chúng ta có thể sử dụng mã JavaScript để đăng ký các hàm xử lý cho các sự kiện này.
Đăng ký một hàm xử lý sự kiện
Có hai cách để đăng ký một hàm xử lý sự kiện trong JavaScript: sử dụng thuộc tính HTML hoặc sử dụng phương thức đăng ký trong JavaScript.
Sử dụng thuộc tính HTML
Đối với các sự kiện như onclick hay onmouseover, chúng ta có thể đặt thuộc tính tương ứng trực tiếp vào thẻ HTML. Ví dụ:
<button onclick="myFunction()">Nhấp vào đây</button>
<div class="copied" data-code="
">Trong đó, myFunction là tên của hàm xử lý sự kiện được định nghĩa trong JavaScript.
Sử dụng phương thức đăng ký
Đối với các sự kiện khác như onkeydown hay onscroll, chúng ta cần sử dụng phương thức đăng ký để đăng ký hàm xử lý. Ví dụ:
element.addEventListener("keydown", myFunction);
Trong đó, element là đối tượng HTML mà chúng ta muốn đăng ký sự kiện, myFunction là tên của hàm xử lý sự kiện.
Các tham số của hàm xử lý sự kiện
Hàm xử lý sự kiện luôn nhận vào một tham số là đối tượng sự kiện (event object), bao gồm các thuộc tính và phương thức để chúng ta có thể xử lý và tương tác với sự kiện.
Một vài thuộc tính quan trọng của đối tượng sự kiện:
- target: đối tượng HTML mà sự kiện xảy ra trên.
- type: loại sự kiện.
- preventDefault(): ngăn chặn các hành động mặc định của sự kiện (ví dụ: ngăn chặn việc chuyển trang khi nhấn vào một liên kết).
- stopPropagation(): ngăn chặn sự kiện lan truyền đến các đối tượng bên trong.
Ví dụ
Để minh họa cho việc xử lý sự kiện trong JavaScript, chúng ta sẽ tạo một ví dụ đơn giản: khi người dùng nhấp vào một nút, màu nền của trang web sẽ thay đổi.
Đầu tiên, chúng ta đặt thuộc tính onclick vào nút HTML:
<button onclick="changeColor()">Thay đổi màu</button>
<div class="copied" data-code="
">