Sự kiện trong Javascript

Trong hướng bài hướng dẫn tự học Javascript này, bạn sẽ được học cách xử lý các sự kiện trong JavaScript.

Hiểu về Sự kiện và Xử lý sự kiện trong Javascript

Sự kiện là điều xảy ra khi người dùng tương tác với trang web, chẳng hạn như khi người dùng nhấp vào một liên kết hoặc button, nhập văn bản vào textbox hoặc textarea, thực hiện lựa chọn trong check box, nhấn phím trên bàn phím, di chuyển con trỏ chuột , gửi biểu mẫu, v.v.

Trong một số trường hợp, Trình duyệt có thể kích hoạt các sự kiện, chẳng hạn như tải trang và hủy tải các sự kiện.
 

Khi một sự kiện xảy ra, bạn có thể sử dụng Trình Xử lý sự kiện JavaScript (Javascript event handler) hoặc Trình lắng nghe sự kiện (Javascript event listener) để phát hiện chúng và thực hiện nhiệm vụ cụ thể hoặc tập hợp các nhiệm vụ.

Đây là các hành động nhằm tạo ra các trang web động / tương tác, hồi đáp lại cho người dùng bằng Javascript.

Nếu muốn học lập trình web động đầy đủ, bài bản hơn với chuyên gia, bạn có thể tham khảo tại đây:

>> Khóa học Lập trình Web với PHP

>> Khóa học Lập trình Java Web Fullstack

Theo quy ước, tên của trình xử lý sự kiện luôn bắt đầu bằng từ 'on', do đó, trình xử lý sự kiện cho sự kiện nhấp được gọi là onclick, tương tự như trình xử lý sự kiện cho sự kiện tải được gọi là onload, trình xử lý sự kiện cho sự kiện mờ được gọi là onblur, v.v.
 

Có một số cách để chỉ định một trình xử lý sự kiện. Cách đơn giản nhất là thêm chúng trực tiếp vào thẻ bắt đầu của các thành phần HTML bằng cách sử dụng các thuộc tính xử lý sự kiện đặc biệt.

Ví dụ: Để gán một trình xử lý nhấp chuột cho một phần tử button, chúng ta có thể sử dụng thuộc tính onclick, như sau:

<button type="button" onclick="alert('Hello World!')">Click Me</button>

Tuy nhiên, để giữ JavaScript tách biệt khỏi HTML, bạn nên thiết lập trình xử lý sự kiện trong tệp JavaScript bên ngoài hoặc trong các thẻ script và / script, ví dụ như sau:

<button type="button" id="myBtn">Click Me</button>
<script>
    function sayHello() {
        alert('Hello World!');
    }
    document.getElementById("myBtn").onclick = sayHello;
</script>

Do các thuộc tính HTML không phân biệt chữ hoa chữ thường nên onclick cũng có thể được viết dưới dạng onClick, OnClick hoặc ONCLICK. Nhưng giá trị của nó lại là trường hợp phân biệt hoa thường.

Nói chung, các sự kiện có thể được phân loại thành bốn nhóm chính - Sự kiện chuột, Sự kiện bàn phím, Sự kiện biểu mẫu và Sự kiện Document / Window.

Còn có nhiều sự kiện khác, chúng ta sẽ tìm hiểu về chúng trong các bài viết sau. Phần sau đây sẽ cung cấp cho bạn một cái nhìn tổng quan ngắn gọn về từng sự kiện hữu ích nhất cùng với các ví dụ thực hành trong lập trình web thực tế.

Hướng dẫn Xử lý sự kiện trong Javascript

1. Sự kiện Chuột trong Javascript

Một Sự kiện chuột được kích hoạt khi người dùng nhấp vào một số phần tử, di chuyển con trỏ chuột lên một phần tử, v.v ...

Dưới đây là một số sự kiện chuột quan trọng nhất và trình xử lý sự kiện của chúng.

1.1. Sự kiện Click (onclick)

Sự kiện click xảy ra khi người dùng nhấp vào một phần tử trên trang web. Thông thường, đây là các phần tử dạng hình thức hoặc liên kết.

Bạn có thể xử lý một sự kiện nhấp bằng trình xử lý Sự kiện onclick.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn nhấp vào các phần tử (nút hoặc liên kết).

<button type="button" onclick="alert('You have clicked a button!');">Click Me</button>
<a href="#" onclick="alert('You have clicked a link!');">Click Me</a>

1.2. Sự kiện oncontextmenu

Sự kiện bối cảnh xảy ra khi người dùng nhấp chuột phải vào một phần tử để mở menu ngữ cảnh. Bạn có thể xử lý một sự kiện bối cảnh bằng trình xử lý sự kiện oncontextmenu.

Ví dụ sau sẽ hiển thị một thông báo cảnh báo khi bạn nhấp chuột phải vào các phần tử.

<button type="button" oncontextmenu="alert('Bạn vừa click phải chuột vào đây!');">Click chuột phải</button>
<a href="#" oncontextmenu="alert('Bạn vừa click phải chuột vào đây');">Click chuột phải</a>

1.3. Sự kiện di chuột một phần tử (onmouseover)

Sự kiện di chuột xảy ra khi người dùng di chuyển con trỏ chuột qua một phần tử.

Bạn có thể xử lý sự kiện di chuột bằng trình xử lý Sự kiện onmouseover.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn đặt chuột lên các phần tử.

<button type="button" onmouseover="alert('Bạn vừa di chuột qua đây!');">Di chuột qua đây!</button>
<a href="#" onmouseover="alert('Bạn vừa di chuột qua đây!');">Di chuột qua đây!</a>

1.4. Sự kiện di chuột ra khỏi phần tử (onmouseout)

Sự kiện mouseout xảy ra khi người dùng di chuyển con trỏ chuột ra ngoài một phần tử.

Bạn có thể xử lý sự kiện mouseout bằng trình xử lý sự kiện onmouseout.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện mouseout xảy ra.

<button type="button" onmouseout="alert('Bạn vừa di chuột ra ngoài!');">Đặt chuột vào đây và di ra ngoài</button>
<a href="#" onmouseout="alert('Bạn vừa di chuột ra ngoài!');">Đặt chuột vào đây và di ra ngoài</a>

2. Sự kiện bàn phím trong Javascript

Một sự kiện bàn phím được kích hoạt khi người dùng nhấn hoặc nhả một phím trên bàn phím. Dưới đây là một số sự kiện bàn phím quan trọng nhất và xử lý sự kiện của chúng.

2.1. Sự kiến nhấn phím bất kỳ (onkeydown)

Sự kiện nhấn phím xảy ra khi người dùng nhấn phím trên bàn phím.

Bạn có thể xử lý sự kiện nhấn phím bằng trình xử lý sự kiện onkeydown.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keydown xảy ra.

<input type="text" onkeydown="alert('Bạn vừa nhấn một phím bên trong phần tử input!')">
<textarea onkeydown="alert('Bạn vừa nhấn một phím bên trong phần tử textarea!')"></textarea>

2.2. Sự kiện nhả phím (onkeyup)

Sự kiện keyup xảy ra khi người dùng nhả một phím trên bàn phím.

Bạn có thể xử lý sự kiện keyup bằng trình xử lý sự kiện onkeyup. Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keyup xảy ra.

<input type="text" onkeyup="alert('Bạn vừa nhả một phím bên trong input!')">
<textarea onkeyup="alert('Bạn vừa nhả một phím bên trong textarea!')"></textarea>

2.3. Sự kiện nhấn phím ký tự (onkeypress)

Sự kiện keypress xảy ra khi người dùng nhấn xuống một phím trên bàn phím là một ký tự.

Ví dụ: các phím như Ctrl, Shift, Alt, Esc, phím mũi tên, v.v. sẽ không tạo ra sự kiện keypress, nhưng sẽ tạo ra sự kiện keydown và keyup.

Bạn có thể xử lý sự kiện nhấn phím bằng trình xử lý sự kiện onkeypress. Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keypress xảy ra.

<input type="text" onkeypress="alert('Bạn vừa nhấn một phím ký tự trong input!')">
<textarea onkeypress="alert('Bạn vừa nhấn một phím ký tự trong textarea!')"></textarea>

3. Sự kiện Form trong Javascript

Sự kiện form được kích hoạt khi form control nhận focus hoặc khi người dùng sửa đổi giá trị điều khiển biểu mẫu, chẳng hạn như nhập văn bản vào text input, chọn bất kỳ tùy chọn nào trong check box, v.v ...

Dưới đây là một số sự kiện form quan trọng nhất và cách Xử lý sự kiện của chúng.

3.1. Sự kiện focus (onfocus)

Sự kiện focus xảy ra khi người dùng tập trung vào một phần tử trên trang web.

Bạn có thể xử lý sự kiện focus bằng trình xử lý sự kiện onfocus.

Ví dụ sau đây sẽ làm nổi bật nền của text input bằng màu vàng khi nhận được focus.

<script>
    function highlightInput(elm){
        elm.style.background = "yellow";
    }    
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>

Lưu ý: Từ khóa this đề cập đến "chính nó" trong cùng một bối cảnh.

3.2. Sự kiện blur (onblur)

Sự kiện blur xảy ra khi người dùng bỏ focus ra khỏi phần tử của form hoặc một cửa sổ.

Bạn có thể xử lý sự kiện blur với trình xử lý sự kiện onblur. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi phần tử nhập văn bản mất focus.

<input type="text" onblur="alert('Text input mất focus!')">
<button type="button">Submit</button>

Để sự kiện blur được bật, trước tiên hãy nhấp vào bên trong phần tử input để tạo focus, sau đó nhấn phím tab trên bàn phím, tập trung vào một cái gì đó khác hoặc nhấp vào bên ngoài nó.

3.3. Sự kiện thay đổi (onchange)

Sự kiện thay đổi xảy ra khi người dùng thay đổi giá trị của một phần tử form.

Bạn có thể xử lý sự kiện thay đổi với trình xử lý sự kiện onchange.

Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn thay đổi tùy chọn trong select box.

<select onchange="alert('Bạn vừa thay đổi lựa chọn');">
    <option>Chọn giới tính</option>
    <option>Nam</option>
    <option>Nữ</option>
</select>

3.4. Sự kiện submit (onsubmit)

Sự kiện submit chỉ xảy ra khi người dùng gửi biểu mẫu trên trang web.

Bạn có thể xử lý sự kiện gửi với trình xử lý sự kiện onsubmit.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo trong khi gửi biểu mẫu đến máy chủ.

<form action="action.php" method="post" onsubmit="alert('Dữ liệu đã được gửi!');">
    <label>First Name:</label>
    <input type="text" name="first-name" required>
    <input type="submit" value="Submit">
</form>

4. Sự kiện Document / Window

Các sự kiện cũng được kích hoạt trong các tình huống khi trang được tải hoặc khi người dùng thay đổi kích thước cửa sổ trình duyệt, v.v ...

Dưới đây là một số sự kiện Document / Window quan trọng nhất và trình xử lý sự kiện của chúng.

4.1. Sự kiện tải trang (onload)

Sự kiện tải trang xảy ra khi một trang web đã tải xong trong trình duyệt web.

Bạn có thể xử lý sự kiện tải với trình xử lý sự kiện onload.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo ngay khi trang tải xong.

<body onload="window.alert('Tải trang thành công!');">
    <h1>Trang web của tôi</h1>
    <p>Đây là nội dung trang web của tôi.</p>
</body>

4.2. Sự kiện hủy tải trang (onunload)

Sự kiện hủy tải trang xảy ra khi người dùng rời khỏi trang web hiện tại.

Bạn có thể xử lý sự kiện dỡ tải bằng trình xử lý sự kiện onunload.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn cố gắng rời khỏi trang.

<body onunload="alert('Bạn có chắc chắn muốn rời trang này?');">
    <h1>Trang web của tôi</h1>
    <p>Đây là nội dung trang web của tôi.</p>
</body>

4.3. Sự kiện thay đổi kích thước trình duyệt (onresize)

Sự kiện thay đổi kích thước trình duyệt xảy ra khi người dùng thay đổi kích thước cửa sổ trình duyệt.

Sự kiện thay đổi kích thước cũng xảy ra trong các tình huống khi cửa sổ trình duyệt được thu nhỏ hoặc mở rộng.

Bạn có thể xử lý sự kiện thay đổi kích thước với trình xử lý sự kiện onresize.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn thay đổi kích thước cửa sổ trình duyệt sang chiều rộng và chiều cao mới.

<p id="result"></p>
<script>
    function displayWindowSize() {
        var w = window.outerWidth;
        var h = window.outerHeight;
        var txt = "Window size: width=" + w + ", height=" + h;
        document.getElementById("result").innerHTML = txt;
    }
    window.onresize = displayWindowSize;
</script>

Bạn đã hiểu về sự kiện trong Javascript chưa?

Đây là những sự kiện quan trọng nhất trong Javascript và cách xử lý các sự kiện này.

Chúng ta sẽ thường thấy các nhiệm vụ này trong khi lập trình web thực tế. Hãy cố gắng thực hành và ghi nhớ nhé.