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à sự kiện, là một tác động nào đó đưa lên các đối tượng HTML thông qua cấu trúc DOM
Nội dung chính Hiển thị
- 1. Sự kiện trong javascript là gì?
- 2. Cách bổ sung / 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 đầu sự kiện cho một thẻ HTML bằng javascript
- Cách 3. Bắt đầu sự kiện cho nhiều thẻ HTML bằng Javascript
- 3. Các sự kiện [Events] trong javascript
- Các bảng điều kiện thường được sử dụng trong javascript
- 4. Các ví dụ về xử lý sự kiện trong javascript
- 5. Lời kết
Tin công nghệ
Bây giờ ta chỉ cần định nghĩa một hàm có tên là
- Tin công nghệ
- Tin trong nước
- Tin thời sự
function do_something[]{
alert['Bạn đã click vào nút này!'];
}cách 2. Bắt đầu sự kiện cho một thẻ HTML bằng javascript
Để thêm sự kiện bằng Javascript, bạn sẽ sử dụng cú pháp như sau
elementObject.eventName = function[]{
// do something
};in which
- ElementObject là đối tượng HTML mà chúng ta sử dụng DOM để lấy
- eventName là tên của sự kiện như title, onchange,
Ví dụ. Add event click for button has
- Tin công nghệ
- Tin trong nước
- Tin thời sự
// Lấy đối tượng
var button = document.getElementById["show-btn"];
// Thêm sự kiện cho đối tượng
button. title = function[]
{
alert["Bạn vừa click vào button"];
};
Cách 3. Bắt đầu sự kiện cho nhiều thẻ HTML bằng Javascript
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
// 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ụ. Add event when click on all cards a class="show" thì thông báo lên câu chào
________số 8Như vậy trong chủ đề này bạn muốn click vào thẻ
- Tin công nghệ
- Tin trong nước
- Tin thời sự
- Tin công nghệ
- Tin trong nước
- Tin thời sự
- Tin công nghệ
- Tin trong nước
- Tin thời sự
3. Các sự kiện [Events] trong javascript
Sau khái niệm sự kiện là gì thì chắc chắn bạn đang nóng lòng muốn biết danh sách các sự kiện trong javascript rồi phải không nào?
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 tin ứng dụng nhất thôi nhé.
Các bảng điều kiện thường được sử dụng trong javascript
STTEEvent NameDescription1 titleXảy ra khi nhấp vào thẻ HTML 2 ondbclick Xảy ra khi nhấp đúp chuột vào HTML 3 onchange Xảy ra khi giá trị [value] của thẻ HTML change. Thường được sử dụng trong các biểu mẫu thẻ đối input4 onmouseover Xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTMLHTML . 11HTML . 11HTML . 11 . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11 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ư- Tin công nghệ
- Tin trong nước
- Tin thời sự
- Tin công nghệ
- Tin trong nước
- Tin thời sự
Ok bây giờ ta sẽ làm một số ví dụ để các bạn thực hiện nhé
4. Các ví dụ về xử lý sự kiện trong javascript
Bây giờ ta sẽ thực hiện một vài ví dụ nhé
Ví dụ 1. Viết chương trình bao gồm một đầu vào ô và một thẻ div được sử dụng để hiển thị nội dung [giá trị của đầu vào ô] khi người dùng nhập vào đầu vào ô
Vì đề bài yêu cầu khi nhập dữ liệu vào ô đầu vào nên hiển thị nội dung bên trong thẻ
- Tin công nghệ
- Tin trong nước
- Tin thời sự
- Tin công nghệ
- Tin trong nước
- Tin thời sự
- Tin công nghệ
- Tin trong nước
- Tin thời sự
Nếu như bài này bạn sử dụng sự kiện
- Tin công nghệ
- Tin trong nước
- Tin thời sự
function do_something[]{
alert['Bạn đã click vào nút này!'];
}0 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. Ngoài ra, sự kiện - Tin công nghệ
- Tin trong nước
- Tin thời sự
Ví dụ 2. Viết chương trình khi người dùng sao chép nội dung của trang web thì thông báo là bạn đã sao chép 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, có sự kiện về bản sao nên ta sẽ sử dụng nó để giải bài này
- Tin công nghệ
- Tin trong nước
- Tin thời sự
Ví dụ 3. Viết chương trình tính tổng của hai số đầu vào [tính tự động]
Bài này ta phải tạo 3 ô đầu vào và gán sự kiện
- Tin công nghệ
- Tin trong nước
- Tin thời sự
- Tin công nghệ
- Tin trong nước
- Tin thời sự
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