Tìm hiểu sự kiện trong javascript

Khi làm việc với javascript thì chắc hẳn bạn phải làm quen với sự kiện (event). Vậy sự kiện là gì? Và tác dụng của sự kiện là như thế nào?

Để hiểu khái niệm này ta cần phải suy ra từ thực tế một chút. Giả sử mai có một sự kiện là Sinh nhật bạn bè chẳng hạn. Thì chúng ta phải thực hiện hành động đến nhà bạn để dự sinh nhật, mua quà để tặng các kiểu (nếu bạn nào không mua quà cũng không sao. :p) Như vậy thì sự kiện thực tế sẽ có thời gian (ngày mai), địa điểm (nhà bạn), hành động (mua quà, đi dự sinh nhật).

Còn sự kiện trong javascript thì sao. Chúng ta sẽ không biết được sự kiện xảy ra chính xác thời điểm nào. Sự kiện xảy ra khi người dùng thực hiện hành động thôi. Nhưng lúc nào thực hiện thì ta không thể biết được mà ta cũng không cần quan tâm đâu.

Nếu thực tế ta lập lịch theo thời gian (chủ nhật thì được nghỉ thì đi chơi, thứ 2 thì đi làm, đến sinh nhật bạn thì dự sinh nhật), trong javascript sẽ lập danh sách công việc theo sự kiện. Khi người dùng nhập liệu thì validate, hiện thông báo nếu dữ liệu vào không hợp lệ. Hoặc khi người dùng múa chuột xung quanh một cái nút mà không biết làm gì thì ta hiện thông báo "Hãy click vào nút này", chẳng hạn như vậy.

Các sự kiện thường được kết hợp với một số chức năng và chức năng đó sẽ không được thực hiện trước khi sự kiện xảy ra. Bây giờ chúng ta cùng tìm hiểu về các sự kiện trong javascript nhé.

Sự kiện chuột (mouse)

Các sự kiện thường sử dụng

Khi sử dụng chuột chúng ta có các thao tác di chuột, click chuột, click đúp chuột, click chuột phải,... Tương ứng với đó trong javascript cũng có các sự kiện sau:

• onclick: Sự kiện xảy ra khi người dùng click vào phần tử
• ondblclick: Sự kiện xảy ra khi người dùng double-click vào phần tử
• oncontextmenu: Sự kiện xảy ra khi người dùng click chuột phải để mở context menu (ấn phím menu trên bàn phím không được nhé)
• onmousedown: Sự kiện xảy ra khi người dùng ấn một nút chuột trên phần tử (kể cả nút chuột giữa)
• onmouseup: Sự kiện xảy ra khi người dùng thả nút chuột qua một phần tử

Bạn sẽ hiểu rõ hơn về sự kiện click chuột khi xem ví dụ này. Chú ý: - Khi người dùng click, double-click, right-click thì sẽ xảy ra sự kiện onmousedown, onmouseup và kèm theo các sự kiện tương ứng. - Sự kiện onmousedown, onmouseup sẽ được xảy ra trước onclick, ondblclick, oncontextmenu - Trường hợp người dùng ấn chuột vào phần tử nhưng lại di chuyển chuột ra chỗ khác để thả nút.