Xử lý sự kiện là một khái niệm quan trọng trong JavaScript. Các sự kiện cho phép các trang HTML trở nên năng động và tương tác, cho phép bạn tạo các giao diện người dùng hấp dẫn. Bạn có thể viết mã để chạy JavaScript khi có sự kiện xảy ra trên DOM.
Một sự kiện có thể là khi người dùng nhấp vào một phần tử HTML, tải trang hoặc khi giá trị của trường nhập liệu thay đổi. Bạn có thể viết mã thay đổi cấu trúc HTML khi một sự kiện xảy ra. Tìm hiểu ba cách khác nhau để bạn có thể thêm trình xử lý sự kiện vào mã của mình.
1. Phương thức addEventListener
Phương thức addEventListener là một trong những phương thức lắng nghe sự kiện phổ biến. Nó có ba tham số:
- Một đối tượng đại diện cho sự kiện.
- Một chức năng để xử lý nó.
- Một boolean tùy chọn, useCapture, mô tả cách sự kiện lan truyền khắp DOM.
Sự kiện có thể là bất kỳ sự kiện DOM được chỉ định nào trên phần tử đích. Một chức năng được thiết lập để đáp ứng sự kiện đó khi nó xảy ra.
Chức năng có thể ẩn danh hoặc chức năng được đặt tên. Các mục tiêu phổ biến bao gồm một phần tử, các phần tử con của nó, một tài liệu và một cửa sổ hỗ trợ một sự kiện.
addEventListener() là phương pháp được đề xuất để quản lý trình xử lý sự kiện trong JavaScript. Nó hoạt động trên bất kỳ mục tiêu sự kiện nào, không chỉ các phần tử HTML và hỗ trợ nhiều trình xử lý sự kiện.
Bạn có thể muốn thực thi một số mã trên DOM. Bạn có thể in văn bản, thực hiện phép tính hoặc hiển thị hình ảnh khi người dùng nhấp vào nút.
Hãy minh họa bằng đoạn mã sau:
<!DOCTYPE html>
<html>
<body>
<h1>The addEventListener Method With Functions</h1>
<button id="myBtn">Click Here</button>
<p id="demo"></p>
</body>
</html>
Tiếp theo, thêm trình xử lý sự kiện bằng nút.
const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction1);
function myFunction1() {
document.getElementById("demo").innerHTML += "Fuction executed! "
}
Khi bạn nhấp vào nút, dòng chữ ‘Chức năng đã thực thi’ sẽ in trên màn hình, như minh họa bên dưới.
2. Ủy thác sự kiện cho addEventListener
Ủy quyền một sự kiện trong JavaScript là một mẫu được sử dụng để xử lý nhiều sự kiện. Thay vì thêm trình xử lý sự kiện vào từng phần tử, bạn chỉ thêm trình xử lý sự kiện vào phần tử tổ tiên. Bạn có thể truy cập phần tử đã kích hoạt sự kiện thông qua .mục tiêu thuộc tính của đối tượng sự kiện.
Điều này đảm bảo rằng tất cả các yếu tố bạn nhắm mục tiêu đều có hành vi được chia sẻ. Nếu không có nó, bạn sẽ phải thêm trình xử lý sự kiện vào từng sự kiện theo cách thủ công.
Đây là một ví dụ về ủy quyền sự kiện:
<!DOCTYPE html>
<html>
<body>
<h1> Event Delegation on Buttons</h1>
<div>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
</body>
</html>
Tiếp theo, thêm trình xử lý sự kiện vào tất cả các nút chỉ bằng một vài dòng mã.
const div = document.querySelector('div')
div.addEventListener("click", (event) => {
if (event.target.tagName === 'BUTTON') {
console.log('Button clicked')
}
});
Ủy quyền sự kiện là một mẫu dựa trên bong bóng sự kiện. Bong bóng sự kiện xảy ra khi một phần tử nhận được một sự kiện và truyền nó đến các phần tử cha và tổ tiên của nó trong DOM. Đó là một khái niệm lan truyền sự kiện xảy ra theo mặc định trong JavaScript.
3. Sử dụng Thuộc tính onclick
Bạn có thể sử dụng thuộc tính onclick để chạy JavaScript khi người dùng nhấp vào một phần tử. Giống như phương thức addEventListener, bạn có thể sử dụng phương thức onclick để in văn bản, thực hiện phép tính và thay đổi các tính năng phần tử trên DOM.
Bạn có thể thêm trình xử lý sự kiện onclick làm trình xử lý sự kiện nội tuyến vào phần tử HTML. Sự kiện xảy ra khi người dùng nhấp vào phần tử. Tự động thay đổi màu của đoạn văn sau bằng phương thức onclick:
<!DOCTYPE html>
<html>
<body>
<h1> Execute onClick Events</h1>
<p id="demo" onclick="myFunction()">
Click me to change my text color.
</p>
</body>
</html>
Trong tệp JavaScript, thêm đoạn mã sau:
function myFunction() {
document.getElementById("demo").style.color = "red";
}
Đầu ra sẽ xuất hiện như được hiển thị:
Tại sao Tìm hiểu về Event Listeners?
Là một nhà phát triển JavaScript, bạn sẽ thường xuyên sử dụng trình xử lý sự kiện trong các dự án. Bạn có thể tạo nhiều tính năng với trình xử lý sự kiện, bao gồm tạo bọt và ghi lại các sự kiện. Hiểu các khái niệm này sẽ giúp bạn tạo giao diện động trên các ứng dụng của mình dễ dàng hơn.
