Sự kiện 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à 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

Sự kiện javascript

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

Đá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 buồn chán và khó nhớ bài. Vì vậy, trong bài viết 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

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ể nắm bắt được sự kiện và yêu cầu javascript thực thi một chương trình nào đó

Bài viết này đã được đăng tại [free tuts. mạng lưới]

Mỗi sự kiện chúng ta có thể chỉ định 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, thu dọn nhà cửa, mua bao lì xì,

Người đánh giá về mặt thực tế thì ta có ví dụ thế này. Giả sử bạn xây dựng một biểu mẫu đăng ký tài khoản và bạn muốn bắt sự kiện khi người dùng CLICK vào nút đăng ký thì hiện các hành động như sau

  • 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 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ẻ đầu vào có id là 'clickme', bây giờ mình viết sự kiện khi nhấp vào ô nhập liệu 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 bổ sung / 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à mã 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

Bây giờ ta chỉ cần định nghĩa một hàm có tên là

1 là được

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ư onclick, onchange,

Ví dụ. Add event click for button has

2


    
        
        
        
    

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ố 8

Như vậy trong chủ đề này bạn muốn click vào thẻ

3 đầu tiên và thẻ
3 thứ 3 thì sẽ thông báo câu chào

1

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 onclickXả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ư
57 onmouseleave Tương tự như
68 onmousemove Xảy ra khi con chuột di chuyển bên trong thẻ HTML9 onkeydown Xảy ra khi nhập một phím bất kỳ vào ô input10 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 onkeyupXảy ra khi bạn nhập phím nhưng lúc bạn gõ 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 ô input14 onblur Xảy ra khi con trỏ chuột rời khỏi ô input15 oncopy Xảy ra khi bạn sao chép nội dung của thẻ16 oncut Xảy ra khi bạn cắt nội dung của thẻ17 onpasteXả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 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ẻ

7 nên ta có thể sử dụng sự kiện
8. 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

6

Nếu như bài này bạn sử dụng sự kiện

9 hoặc
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
8 xảy ra khi bạn mở khóa nên nó sẽ nhận được giá trị mới

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

0

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

8 cho 2 ô đầu vào đầu tiên, trong sự kiện này sẽ thực hiện tính tổng của hai ô và đưa kết quả vào ô đầu vào thứ 3

0

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