Cách sử dụng Trình xử lý sự kiện trong JavaScript
Nhiều ứng dụng web dựa vào một số dạng sự kiện để thực hiện các chức năng của chúng. Tại một số thời điểm, con người tương tác với giao diện của họ, giao diện này tạo ra một sự kiện. Các sự kiện do con người điều khiển này thường dựa vào một thiết bị ngoại vi, chẳng hạn như chuột hoặc bàn phím.
Khi một thiết bị tạo ra một sự kiện, chương trình có thể lắng nghe nó, để biết khi nào cần thực hiện hành vi cụ thể. Trong hướng dẫn này, bạn sẽ học cách lắng nghe các sự kiện bằng JavaScript.
Mục Lục
Lập trình theo hướng sự kiện là gì?
Lập trình hướng sự kiện là tên của một mô hình dựa vào việc thực thi một sự kiện để thực hiện các chức năng của nó. Có thể tạo một chương trình hướng sự kiện bằng bất kỳ ngôn ngữ lập trình cấp cao nào. Nhưng lập trình hướng sự kiện phổ biến nhất trong các ngôn ngữ như JavaScript tích hợp với giao diện người dùng.
Trình xử lý sự kiện là gì?
Trình nghe sự kiện là một chức năng bắt đầu một quy trình được xác định trước nếu một sự kiện cụ thể xảy ra. Vì vậy, một bộ xử lý sự kiện “lắng nghe” một hành động, sau đó gọi một hàm thực hiện một tác vụ liên quan. Sự kiện này có thể có một trong nhiều hình thức. Các ví dụ phổ biến bao gồm sự kiện chuột, sự kiện bàn phím và sự kiện cửa sổ.
Tạo trình xử lý sự kiện bằng JavaScript
Bạn có thể nghe các sự kiện trên bất kỳ phần tử nào trong DOM. JavaScript có một addEventListener () chức năng mà bạn có thể gọi trên bất kỳ phần tử nào trên trang web. Các addEventListener () hàm là một phương thức của EventTarget giao diện. Tất cả các đối tượng hỗ trợ sự kiện thực hiện giao diện này. Điều này bao gồm cửa sổ, tài liệu và các phần tử riêng lẻ trên trang.
Hàm addEventListener () có cấu trúc cơ bản sau:
element.addEventListener("event", functionToExecute);Ở đâu:
-
các thành phần có thể đại diện cho bất kỳ thẻ HTML nào (từ một nút đến một đoạn văn)
-
các “biến cố” là một chuỗi đặt tên cho một hành động cụ thể, được công nhận
-
các functionToExecute là một tham chiếu đến một chức năng hiện có
Hãy tạo trang web sau có một vài phần tử HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="home">
<h1 class="mainHeading">Welcome</h1>
<p>
Hello, welcome to my website.
</p>
<button class="btn" id="btn=1">Learn More</button>
</div>
<div id="about">
<h2 class=subheading>User Info</h2>
<label for="username">User Name: </label>
<input type="text" id="username">
<button class="btn" id="btn-2">Submit</button>
</div>
<script src="app.js"></script>
</body>
</html>
Đoạn mã HTML ở trên tạo một trang đơn giản liên kết đến một tệp JavaScript có tên là app.js. Các app.js tệp sẽ chứa mã để thiết lập trình nghe sự kiện. Vì vậy, nếu bạn muốn bắt đầu một quy trình cụ thể bất cứ khi nào người dùng nhấp vào nút đầu tiên trên trang web, thì đây là tệp để tạo quy trình đó.
Tệp app.js
document.querySelector('.btn').addEventListener("click", clickDemo)
function clickDemo(){
console.log("Hi there")
}Mã JavaScript ở trên truy cập vào nút đầu tiên trên trang bằng cách sử dụng querySelector () chức năng. Sau đó, nó thêm một trình nghe sự kiện vào phần tử này bằng cách sử dụng addEventListener () phương pháp. Sự kiện cụ thể mà nó lắng nghe có tên là “nhấp chuột”. Khi nút kích hoạt sự kiện đó, người nghe sẽ gọi clickDemo () chức năng.
Các clickDemo () chức năng in “Xin chào” vào bảng điều khiển của trình duyệt. Mỗi khi bạn nhấp vào nút, bạn sẽ thấy đầu ra này trong bảng điều khiển của mình.
Đầu ra sự kiện “nhấp chuột”
Sự kiện Chuột là gì?
JavaScript có một MouseEvent giao diện đại diện cho các sự kiện xảy ra do tương tác của người dùng với chuột của họ. Một số sự kiện sử dụng MouseEvent giao diện. Những sự kiện này bao gồm những điều sau:
-
nhấp chuột
-
dblclick
-
di chuột
-
Di chuột lên trên
-
chuột ra ngoài
-
chuột lên
-
Di chuột xuống
Các nhấp chuột sự kiện xảy ra khi người dùng nhấn và thả nút chuột trong khi con trỏ của nó nằm trên một phần tử. Đây chính xác là những gì đã xảy ra trong ví dụ trước. Như bạn có thể thấy từ danh sách trên, các sự kiện chuột có thể có nhiều dạng.
Một sự kiện chuột phổ biến khác là dblclick, là viết tắt của nhấp đúp. Điều này kích hoạt khi người dùng nhấp vào nút chuột hai lần liên tiếp. Một điều đáng chú ý về addEventListener () chức năng là bạn có thể sử dụng nó để gán nhiều trình nghe sự kiện cho một phần tử duy nhất.
Thêm sự kiện dblclick vào nút đầu tiên
document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
alert("This is a demonstration of how to create a double-click event")
}Thêm mã ở trên vào tệp app.js sẽ tạo hiệu quả trình xử lý sự kiện thứ hai cho nút đầu tiên trên trang web. Vì vậy, nhấp vào nút đầu tiên hai lần sẽ tạo ra cảnh báo sau trong trình duyệt:
Trong hình trên, bạn sẽ thấy cảnh báo được tạo và bạn cũng sẽ thấy thêm hai đầu ra “Xin chào” trong bảng điều khiển. Điều này là do sự kiện nhấp đúp là sự kết hợp của hai sự kiện nhấp chuột và có các trình xử lý sự kiện cho cả nhấp chuột và dblclick sự kiện.
Tên của các sự kiện chuột khác trong danh sách mô tả hành vi của chúng. Các di chuột sự kiện xảy ra mỗi khi người dùng di chuyển chuột khi con trỏ ở trên một phần tử. Các chuột lên sự kiện xảy ra khi người dùng giữ một nút trên một phần tử, sau đó thả nó ra.
Sự kiện bàn phím là gì?
JavaScript có một KeyboardEvent giao diện. Điều này sẽ lắng nghe các tương tác giữa người dùng và bàn phím của họ. Trong quá khứ, KeyboardEvent có ba loại sự kiện. Tuy nhiên, JavaScript kể từ đó đã không còn sử dụng phím bấm biến cố.
Nên keyup và bàn phím sự kiện là hai sự kiện bàn phím được đề xuất duy nhất, là tất cả những gì bạn cần. Các bàn phím sự kiện xảy ra khi người dùng nhấn xuống một phím và keyup sự kiện xảy ra khi người dùng phát hành nó.
Xem lại ví dụ HTML ở trên, nơi tốt nhất để thêm trình xử lý sự kiện bàn phím là trên đầu vào thành phần.
Thêm trình xử lý sự kiện bàn phím vào tệp app.js
let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput(e){
greetings.innerText = (`Hello ${e.target.value}, welcome to my website.`)
}
Đoạn mã trên sử dụng querySelector () chức năng để truy cập đoạn văn và đầu vào các phần tử trên trang. Sau đó nó gọi addEventListener () phương pháp trên đầu vào phần tử lắng nghe keyup biến cố. Bất cứ khi nào keyup sự kiện xảy ra, captureInput () hàm nhận giá trị khóa và thêm nó vào đoạn trên trang. Các e tham số đại diện cho sự kiện mà JavaScript tự động chỉ định. Đối tượng sự kiện này có một thuộc tính, đích, là một tham chiếu đến phần tử mà người dùng đã tương tác.
Trong ví dụ này, nhãn được đính kèm với đầu vào trường yêu cầu tên người dùng. Nếu bạn nhập tên của bạn vào đầu vào thì trang web sẽ trông giống như sau:
Đoạn văn bây giờ chứa giá trị đầu vào, trong ví dụ trên, là “Jane Doe”.
addEventListener thu thập tất cả các loại tương tác của người dùng
Bài viết này đã giới thiệu cho bạn addEventListener () cũng như một số sự kiện chuột và bàn phím mà bạn có thể sử dụng với nó. Tại thời điểm này, bạn biết cách lắng nghe một sự kiện cụ thể và cách tạo một hàm phản hồi nó.
Các addEventListener cung cấp thêm khả năng, tuy nhiên, thông qua tham số thứ ba của nó. Bạn có thể sử dụng nó để kiểm soát sự lan truyền sự kiện: thứ tự mà các sự kiện di chuyển từ các phần tử đến cha mẹ hoặc con cái của chúng.
Đọc tiếp
Giới thiệu về tác giả
