5.1 Cơ bản về làm việc với sự kiện
Sự kiện trong JavaScript cho phép tương tác với người dùng và phản ứng lại những hành động của họ như click chuột, nhấn phím, thay đổi trong form và nhiều hơn nữa. Hiểu cách thêm và xóa event handlers là một phần quan trọng trong phát triển ứng dụng web tương tác.
Sự kiện là gì?
Sự kiện là tín hiệu từ trình duyệt thông báo rằng có điều gì đó đã xảy ra. Ví dụ, người dùng đã click vào nút hoặc trang đã được tải. Sự kiện cho phép thực hiện các hành động cụ thể để phản hồi lại những tín hiệu này.
Loại sự kiện
Có rất nhiều loại sự kiện. Một số loại thường được sử dụng bao gồm:
- Chuột:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - Bàn phím:
keydown,keyup,keypress - Form:
submit,change,focus,blur - Tài liệu/Cửa sổ:
load,resize,scroll,unload
Event handlers
Event handlers (hay listener sự kiện) là các hàm được thực hiện để phản hồi lại một sự kiện nào đó. Chúng "nghe" các sự kiện cụ thể và được kích hoạt khi những sự kiện này xảy ra.
5.2 Thêm event handlers
Thêm event handlers với addEventListener
Phương thức addEventListener cho phép thêm event handlers vào các phần tử. Nó cung cấp sự linh hoạt và kiểm soát lớn hơn so với các phương pháp truyền thống để thêm sự kiện, chẳng hạn như sử dụng thuộc tính HTML (onclick, onchange v.v.).
Cú pháp:
element.addEventListener(event, handler, options);
Ở đâu:
element: phần tử mà bạn muốn thêm event handlerevent: loại sự kiện cần phản ứng (ví dụ 'click', 'input', 'keydown')handler: hàm sẽ được gọi khi sự kiện xảy raoptions: các tham số bổ sung (không bắt buộc)
Ví dụ: Thêm event handler cho sự kiện click
Trong ví dụ này, event handler được thêm vào nút. Khi người dùng click vào nút, thông báo sẽ bật lên.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>
</body>
</html>
Ví dụ: Thêm nhiều event handlers
Sử dụng addEventListener bạn có thể thêm nhiều event handlers cho một sự kiện.
Trong ví dụ này, hai event handlers được thêm vào nút. Khi click, cả hai handlers thực hiện tuần tự, in ra các thông báo tương ứng trong console.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('First handler');
});
button.addEventListener('click', function() {
console.log('Second handler');
});
</script>
</body>
</html>
5.3 Sử dụng tham số options
Tham số options cho phép điều chỉnh hành vi của event handler. Các tùy chọn thường được sử dụng nhất:
once: nếutrue, handler sẽ được gọi chỉ một lần, sau đó tự động bị xóacapture: nếutrue, sự kiện được xử lý trong giai đoạn bắt thay vì giai đoạn nổipassive: nếutrue, chỉ định rằng handler không bao giờ gọipreventDefault()
Ví dụ: Handler chỉ thực hiện một lần
Trong ví dụ này, event handler chỉ chạy một lần, sau đó tự động bị xóa.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('This will be shown only once');
}, { once: true });
</script>
</body>
</html>
5.4 Xóa event handlers
Xóa event handlers với removeEventListener
Phương thức removeEventListener cho phép xóa event handlers đã được thêm bằng addEventListener. Để làm điều này, cần truyền các tham số giống như khi thêm handler.
Cú pháp:
element.removeEventListener(event, handler, options)
Ở đâu:
element: phần tử mà bạn muốn xóa event handlerevent: loại sự kiện, handler cần xóahandler: hàm đã được chỉ định là handler cho sự kiệnoptions: các tham số bổ sung (phải khớp với tham số được sử dụng khi thêm handler)
Ví dụ: Xóa event handler cho sự kiện click
Trong ví dụ này, event handler click được thêm vào nút. Nhấn vào nút khác sẽ xóa event handler click.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<button id="removeButton">Remove Click Handler</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('Button clicked!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('Click handler removed');
});
</script>
</body>
</html>
GO TO FULL VERSION