Onkeyup là gì

Quảng cáo

Nội dung chính

Các sự kiện (Event) trong Javascript
1. Sự kiện trong javascript là gì?
2. Cách thêm / bắt sự kiện trong Javascript
Cách 1: Bắt sự kiện trực tiếp trong thẻ HTML
Cách 2: Bắt sự kiện cho một thẻ HTML bằng javascript
Cách 3: Bắt sự kiện cho nhiều thẻ HTML bằng Javascrip
3. Các sự kiện (Events) trong javascrpt
Bảng các sự kiện thường dùng trong javascript.
4. Các ví dụ về xử lý sự kiện trong javascript
5. Lời kết

Home > Javascript > Javascript căn bản > Các sự kiện (Event) trong Javascript

Các sự kiện (Event) trong Javascript

Trong bài này mình sẽ giới thiệu các sự kiện trong Javascript. Sự kiện hay còn lại là event, là một tác động nào đó lên các đối tượng HTML thông qua cấu trúc DOM.

Đáng lẽ bài này mình sẽ tiếp tục giới thiệu với các bạn DOM, nhưng nhận thấy việc học mà không thực hành thì rất nhàm chán và khó nhớ bài. Vì vậy, trong bài này mình sẽ giới thiệu về các sự kiện js. Sau bài này chúng ta có thể làm được nhiều ví dụ hơn và mình cũng sẽ không mất quá nhiều thời gian giải thích nữa.

Quảng cáo

Trước tiên chúng ta hãy tìm hiểu xem sự kiện trong JS là gì đã nhé.

1. Sự kiện trong javascript là gì?

Sự kiện là một hành động tác động lên các đối tượng HTML, qua đó ta có thể bắt được sự kiện và yêu cầu javascript thực thi một chương trình nào đó.

Mỗi sự kiện chúng ta có thể gán nhiều hành động. Ví dụ bạn có một sự kiện là tết âm lịch, thì bạn sẽ có những hành động trong sự kiện đó là mua đồ mới, dọn dẹp nhà cửa, mua bao lì xì, ..Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Xét về mặt thực tế thì ta có dụ thế này: Giả sử bạn xây dựng một form đăng ký tài khoản và bạn muốn bắt sự kiện khi người dùng CLICK vào button đăng ký thì hiện những hành động như:

Quảng cáo

Kiểm tra người dùng có nhập dữ liệu không.
Kiểm tra người dùng nhập dữ liệu có đúng định dạng không.
...

Như vậy, bạn cần phải nhớ rằng mỗi sự kiện trong JS thì ta có thể gán nhiều hành động khác nhau, và gán bao nhiêu hành động thì phụ thuộc vào từng chức năng cụ thể.

Ví dụ: Giả sử mình có một thẻ input có id là 'clickme', bây giờ mình viết sự kiện khi click vào ô input thì xuất ra một thông báo. document.getElementById('clickme').onclick = function(){ alert('Bạn đã click vào nút này!'); };

2. Cách thêm / bắt sự kiện trong Javascript

Chúng ta có hai cách cơ bản để bắt sự kiện, thứ nhất là code trực tiếp trong thẻ HTML, thứ hai là sử dụng javascript như chúng ta đã làm ở phần 1.

Cách 1: Bắt sự kiện trực tiếp trong thẻ HTML

Giả sử mình có một đoạn mã HTML như sau: <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>

Bây giờ ta chỉ cần định nghĩa môt hàm có tên là do_something() là được.

Quảng cáo Demo RUN function do_something(){ alert('Bạn đã click vào nút này!'); }

Cách 2: Bắt sự kiện cho một thẻ HTML bằng javascript

Để thêm sự kiện bằng Javascript thì bạn sẽ sử dụng cú pháp như sau: elementObject.eventName = function(){ // do something };

Trong đó:

elementObject là đối tượng HTML mà chúng ta sử dụng DOM để lấy.
eventName là tên của event như onclick, onchange, ...

Ví dụ: Thêm sự kiện click cho button có id="show-btn" Demo RUN <html> <body> <input type="button" id="show-btn" value="Click me" /> <script language="javascript"> // Lấy đối tượng var button = document.getElementById("show-btn"); // Thêm sự kiện cho đối tượng button.onclick = function() { alert("Bạn vừa click vào button"); }; </script> </body> </html>

Cách 3: Bắt sự kiện cho nhiều thẻ HTML bằng Javascrip

Trong javascript, trường hợp bạn muốn bắt sự kiện trên nhiều thẻ HTML thì có thể sử dụng vòng lặp nhé.

Cú pháp như sau:

Quảng cáo // Lấy đối tượng html, bạn có thể sử dụng các DOM Element khác để lấy var elementObjs = document.getElementsByTagName('element'); // Lặp qua từng phần tử trong kết quả và gán sự kiện for (var i = 0; i < elementObjs.length; i++) { elementObjs[i].eventName = function() { // Do simething }; } Ví dụ: Thêm sự kiện khi click vào tất cả các thẻ a có class="show" thì thông báo lên câu chào. <ul> <li><a href="#" class="show">Tin công nghệ</a></li> <li><a href="#">Tin trong nước</a></li> <li><a href="#" class="show">Tin thời sự</a></li> </ul>

Như vậy trong đề bài này muốn khi click vào thẻ a đầu tiên và thẻ a thứ 3 thì sẽ thông báo câu chào. Bài giải RUN <html> <body> <ul> <li><a href="#" class="show">Tin công nghệ</a></li> <li><a href="#">Tin trong nước</a></li> <li><a href="#" class="show">Tin thời sự</a></li> </ul> <script language="javascript"> // Lấy đối tượng var a_list = document.getElementsByClassName("show"); // Lặp và gán sự kiện for (var i = 0; i < a_list.length; i++){ a_list[i].onclick = function() { alert('Xin chào, bạn vừa click vào tôi'); // return false để khỏi reload trang return false }; } </script> </body> </html>

3. Các sự kiện (Events) trong javascrpt

Sau khái niệm sự kiện là gì thì chắc hẳn bạn đang nôn nóng muốn biết danh sách các sự kiện trong javascript rồi phải không nào? Ok ta bắt đầu ngay luôn.

Trong Javascript có rất nhiều sự kiện, và mỗi đối tượng HTML thì lại có những sự kiện khác nhau nên mình chỉ liệt kê được những sự kiện thông dụng nhất thôi nhé.

Bảng các sự kiện thường dùng trong javascript.

STT	Event Name	Description
1	onclick	Xảy ra khi click vào thẻ HTML
2	ondbclick	Xảy ra khi double click vào thẻ HTML
3	onchange	Xảy ra khi giá trị (value) của thẻ HTML đổi. Thường dùng trong các đối thẻ form input
4	onmouseover	Xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML
5	onmouseout	Xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML
6	onmouseenter	Tương tự như `onmouseover`
7	onmouseleave	Tương tự như `onmouseout`
8	onmousemove	Xảy ra khi con chuột di chuyển bên trong thẻ HTML
9	onkeydown	Xảy ra khi gõ một phím bất kì vào ô input
10	onload	Sảy ra khi thẻ HTML bắt đầu chạy, nó giống như hàm khởi tạo trong lập trình hướng đối tượng vậy đó.
11	onkeyup	Xảy ra khi bạn gõ phím nhưng lúc bạn nhã phím ra sẽ được kích hoạt
12	onkeypress	Xảy ra khi bạn nhấn môt phím vào ô input
14	onblur	Xảy ra khi con trỏ chuột rời khỏi ô input
15	oncopy	Xảy ra khi bạn copy nội dung của thẻ
16	oncut	Xảy ra khi bạn cắt nội dung của thẻ
17	onpaste	Xảy ra khi bạn dán nội dung vào thẻ

Ok bây giờ ta sẽ làm một số ví dụ để các bạn thực hành nhé.

4. Các ví dụ về xử lý sự kiện trong javascript

Bây giờ ta sẽ thực hành một vài ví dụ nhé.

Quảng cáo Ví dụ 1: Viết chương trình gồm một ô input và một thẻ div dùng để hiển thị nội dung (giá trị của ô input) khi người dùng gõ vào ô input

Vì đề bài yêu cầu khi nhập dữ liệu vào ô input thì hiển thị nội dung bên trong thẻ DIV nên ta có thể sử dụng sự kiện onkeyup. Thứ hai nữa là chúng ta sẽ sử dụng các hàm DOM Element để truy xuất các đối tượng HTML. Demo RUN <html> <body> <script language="javascript"> // Hàm show kết quả function show_result() { // Lấy hai thẻ HTML var input = document.getElementById("message"); var div = document.getElementById("result"); // Gán nội dung ô input vào thẻ div div.innerHTML = input.value; } </script> <input type="text" id="message" value="" onkeyup="show_result()"/> <div id="result"></div> </body> </html>

Nếu như bài này bạn sử dụng sự kiện onkeypress hoặc onkeydown thì sẽ có kết quả sai. Lý do là những sự kiện này xảy ra khi bạn nhấn phím xuống nên nó sẽ lấy giá trị chưa được cập nhật. Còn sự kiện onkeyup xảy ra khi bạn nhả phím ra nên nó sẽ lấy được giá trị mới. Ví dụ 2: Viết chương trình khi người dùng copy nội dung của website thì thông báo là bạn đã copy thành công

Bài này quá dễ phải không nào. Trong danh sách các sự kiện trên thì có sự kiện oncopy nên ta sẽ sử dụng nó để giải bài này. Demo RUN <html> <body> <script language="javascript"> // Hàm show kết quả function show_message() { alert("Bạn đã copy thành công"); } </script> <h3>Hãy copy dòng chữ dưới đây:</h3> <div oncopy="show_message()">Chào mừng các bạn đến với website freetuts.net</div> </body> </html> Ví dụ 3: Viết chương trình tính tổng của hai số nhập vào (tính tự động)

Bài này ta phải tạo 3 ô input và gán sự kiện onkeyup cho 2 ô input đầu tiên, trong sự kiện này sẽ thực hiện tính tổng của hai ô và in kết quả vào ô input thứ 3. Demo RUN <html> <body> <script language="javascript"> // Hàm tính kết quả function tinh() { // Lấy 3 ô input var a = document.getElementById("a"); var b = document.getElementById("b"); var result = document.getElementById("result"); // Tính tổng hai ô đầu tiên var tong = parseInt(a.value) + parseInt(b.value); // Gán giá trị vào ô thứ ba // Phải kiểm tra tổng hai số này có bị lỗi hay không if (!isNaN(tong)){ result.value = tong; } } </script> a: <input type="text" id="a" value="" onkeyup="tinh()"/> b: <input type="text" id="b" value="" onkeyup="tinh()"/> Kết quả: <input type="text" id="result" value=""/> </body> </html>

5. Lời kết

Như vậy là mình đã giới thiệu xong danh sách các sự kiện thường dùng trong Javascript. Qua bài này bạn phải hiểu được cơ chế hoạt động của sự kiện, để từ biết được nên gán hành động nào vào sự kiện nào.

Quảng cáo

Làm việc với Javascript không khó, cái khó là bạn phải hiểu cơ chế hoạt động của JS nhé.

Quảng cáo

Bài trước Bài tiếp

Bài viết cùng chuyên mục:

Cách gộp hai object javascript lại với nhau
Cách lấy chiều dài của object trong Javascript
Hướng dẫn giải phương trình bậc 1 bằng Javascript
Cách dùng nextSibling trong javascript
Cách dùng insertAdjacentHTML trong javascript
Cách dùng innerHTML trong Javascript
Cách dùng insertBefore trong javascript
Cách dùng insertAfter trong Javascript
Cách dùng parentNode trong Javascript
Cách dùng parentElement trong Javascript
Tính tổng các phần tử trong mảng javascript
Tính tổng hai số bằng Javascript (cộng hai số)
Cách gán giá trị cho thẻ input trong javascript
Cách kiểm tra số nguyên âm trong javascript
Cách kiểm tra số nguyên dương trong javascript
Hàm closure trong javascript
Biểu thức chính quy RegEx trong Javascript
Cách dùng Import / Export Module trong javascript
Cơ chế hoạt động của hoisting trong Javascript
Cấp độ private / protected của class trong Javascript

Quảng cáo

Tải thêm tài liệu liên quan đến bài viết Onkeyup là gì

Onkeyup là gì

Các sự kiện (Event) trong Javascript

1. Sự kiện trong javascript là gì?

2. Cách thêm / bắt sự kiện trong Javascript

Cách 1: Bắt sự kiện trực tiếp trong thẻ HTML

Cách 2: Bắt sự kiện cho một thẻ HTML bằng javascript

Cách 3: Bắt sự kiện cho nhiều thẻ HTML bằng Javascrip

3. Các sự kiện (Events) trong javascrpt

Bảng các sự kiện thường dùng trong javascript.

4. Các ví dụ về xử lý sự kiện trong javascript

5. Lời kết

Bài Viết Liên Quan

Quảng Cáo

Tương Tự

Quảng cáo

Xem Nhiều

Quảng cáo

Chủ đề

Token Data

Quảng Cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội