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

Khi làm việc với JavaScript, bạn sẽ thường xuyên gặp phải các sự kiện (events). Vậy sự kiện là gì? Và vai trò của sự kiện như thế nào?

Để hiểu sâu hơn về khái niệm này, hãy xem một ví dụ từ thực tế. Giả sử ngày mai có một sự kiện là Sinh nhật của bạn bè. Để tham gia sự kiện này, chúng ta phải làm những hành động như đến nhà bạn bè, mua quà (không mua cũng không sao, haha). Vì vậy, sự kiện thực tế sẽ có thời gian (ngày mai), địa điểm (nhà bạn bè), và các hành động (mua quà, tham gia sinh nhật).

Tương tự, trong JavaScript, chúng ta không thể biết chính xác sự kiện sẽ xảy ra vào thời điểm nào. Sự kiện chỉ xảy ra khi người dùng thực hiện một hành động. Tuy nhiên, chúng ta không cần phải quan tâm đến thời gian xảy ra sự kiện đó.

Giống như việc lập lịch theo thời gian trong thực tế (chủ nhật là ngày nghỉ, thứ 2 là ngày làm việc, đến sinh nhật của bạn thì tham gia sinh nhật), trong JavaScript chúng ta sẽ lập danh sách công việc dựa trên các sự kiện. Khi người dùng nhập liệu, chúng ta kiểm tra tính hợp lệ của dữ liệu và hiển thị thông báo nếu cần. Hoặc khi người dùng di chuyển chuột xung quanh một nút mà không biết làm gì, chúng ta có thể hiển thị thông báo “Hãy click vào nút này”.

Các sự kiện thường được kết hợp với các chức năng, và chức năng đó sẽ không được thực hiện cho đến khi sự kiện xảy ra. Bây giờ hãy cùng tìm hiểu về các sự kiện trong JavaScript.

Sự kiện chuột (mouse)

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

Khi sử dụng chuột, chúng ta thường thực hiện các hành động như di chuyển chuột, click chuột, double-click chuột, click chuột phải,… Tương ứng với các hành động này, 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 sẽ không kích hoạt sự kiện này)
• onmousedown: Sự kiện xảy ra khi người dùng nhấn giữ một nút chuột trên phần tử (bao gồm cả nút chuột giữa)
• onmouseup: Sự kiện xảy ra khi người dùng nhả nút chuột sau khi nhấn

Bạn sẽ hiểu rõ hơn về sự kiện click chuột khi xem ví dụ sau:
Lưu ý:
– Khi người dùng click chuột, double-click chuột, hoặc right-click chuột, sẽ kích hoạt sự kiện onmousedown và onmouseup kèm theo các sự kiện tương ứng.
– Sự kiện onmousedown và onmouseup xảy ra trước sự kiện onclick, ondblclick, và oncontextmenu.
– Trường hợp người dùng nhấn chuột vào một phần tử nhưng di chuyển chuột ra khỏi phần tử và sau đó nhả nút chuột, sẽ kích hoạt sự kiện onmousedown, nhưng không kích hoạt sự kiện onclick trên phần tử đó. Chức năng của sự kiện click chuột trên phần tử đó sẽ không được thực hiện. Sự kế tiếp là khi người dùng nhả nút chuột ở một vị trí khác, sẽ kích hoạt sự kiện onmouseup và onclick, và chức năng click chuột sẽ được thực hiện.
– Khi người dùng double-click chuột, nghĩa là văn bản mà họ double-click sẽ được bôi đen. Để ngăn chặn điều này, chúng ta có thể sử dụng thuộc tính “user-select: none;” trong CSS. Xem ví dụ dưới đây.

• onmousemove: Sự kiện xảy ra khi con trỏ chuột di chuyển trên phần tử
• onmouseenter: Sự kiện xảy ra khi con trỏ chuột đi vào phần tử
• onmouseover: Sự kiện xảy ra khi con trỏ chuột đi vào phần tử hoặc các phần tử con của nó

Ví dụ:

Sự kiện tương ứng với onmouseenter và onmouseover là onmouseleave và onmouseout.

• onmouseleave: Sự kiện xảy ra khi con trỏ chuột rời khỏi phần tử
• onmouseout: Sự kiện xảy ra khi con trỏ chuột rời khỏi phần tử hoặc các phần tử con của nó

Các thuộc tính cơ bản

• event.which: Thể hiện nút chuột được nhấn
  • event.which == 1: Nút chuột trái
  • event.which == 2: Nút chuột giữa
  • event.which == 3: Nút chuột phải
• event.shiftKey, event.altKey, event.ctrlKey: Biểu thị trạng thái của các phím tương ứng khi sự kiện chuột xảy ra. Có giá trị là true nếu phím đó được nhấn.
• event.clientX và event.clientY là hai tọa độ của con trỏ chuột trong cửa sổ trình duyệt.
• event.pageX và event.pageY là hai tọa độ của con trỏ chuột trên trang (document).

Sự kiện bàn phím (Keyboard)

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

• onkeydown: Sự kiện xảy ra khi người dùng đang nhấn một phím (sẽ kích hoạt với tất cả các phím)
• onkeypress: Sự kiện xảy ra khi người dùng đang nhấn một phím (một số phím như alt, shift, ctrl, esc, backspace, delete, các phím mũi tên,… sẽ không kích hoạt sự kiện này)
• onkeyup: Sự kiện xảy ra khi người dùng thả một phím

Các thuộc tính cơ bản

• event.key: Ký tự tương ứng với phím được nhấn
• event.keyCode: Mã của phím được nhấn
• event.shiftKey, event.altKey, event.ctrlKey: Biểu thị trạng thái của các phím tương ứng khi sự kiện bàn phím xảy ra. Có giá trị là true nếu phím đó được nhấn.
  Lưu ý:
  • Thứ tự xảy ra sự kiện sẽ như sau: onkeydown -> onkeypress -> chức năng của phím được thực hiện -> onkeyup

Sự kiện khung (Frame)

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

• onscroll: Sự kiện xảy ra khi thanh cuộn của phần tử đang được cuộn

  Lưu ý:

  • Khi bạn thay đổi kích thước cửa sổ làm thay đổi vị trí cuộn của trang, sự kiện scroll cũng sẽ được kích hoạt

Sự kiện form

• onfocus: Sự kiện xảy ra khi thành phần nhận focus. Một thành phần nhận focus có con trỏ bên trong, ví dụ như một ô input. Một ô checkbox hoặc radio được di chuyển đến hoặc được click cũng sẽ kích hoạt sự kiện focus.
• onblur: Đối nghịch với sự kiện onfocus. Sự kiện xảy ra khi thành phần mất focus.
• onchange: Sự kiện xảy ra khi nội dung, giá trị của thành phần được thay đổi. Đối với các thành phần input, select, textarea.

Đối với ô nhập liệu, khi người dùng thay đổi giá trị và di chuyển ra khỏi ô đó (blur), sự kiện onchange sẽ được kích hoạt.

Tuy nhiên, khi người dùng nhập dữ liệu vào ô input hoặc textarea và chúng ta cần lấy giá trị đó để validate, chúng ta sẽ sử dụng sự kiện oninput dưới đây.

• oninput: Sự kiện xảy ra khi người dùng nhập giá trị vào ô input hoặc textarea

  Lưu ý:

  • Đối với các ô select, checkbox, radio, cũng có sự kiện oninput, nhưng tùy thuộc vào trình duyệt. Ví dụ, trên Google Chrome không có sự kiện oninput cho các ô checkbox, radio. Vì vậy, chúng ta chỉ nên sử dụng sự kiện oninput cho các ô nhập liệu.

• onselect: Sự kiện xảy ra khi người dùng chọn một số văn bản trong ô nhập liệu (input text, textarea, keygen)

• onsubmit: Sự kiện xảy ra khi form được submit

• onreset: Sự kiện xảy ra khi form được reset về giá trị mặc định

Sự kiện kéo thả (Drag, Drop)

Sự kiện này cho phép chúng ta kéo một phần tử và thả nó vào vị trí khác. Các phần tử có thể kéo thả được phải có thuộc tính draggable=”true”. Ví dụ:

• ondragstart: Sự kiện xảy ra khi người dùng bắt đầu kéo một phần tử
• ondrag: Sự kiện xảy ra khi phần tử đang được kéo
• ondragend: Sự kiện xảy ra khi người dùng hoàn thành kéo một phần tử
• ondragenter: Sự kiện xảy ra khi phần tử được kéo tới mục tiêu của nó
• ondragover: Sự kiện xảy ra khi phần tử đang được kéo lên trên mục tiêu thả
• ondragleave: Sự kiện xảy ra khi phần tử bị kéo ra khỏi mục tiêu thả
• ondrop: Sự kiện xảy ra khi phần tử bị kéo thả vào mục tiêu thả

Ví dụ về kéo thả một phần tử div:

Sự kiện Clipboard

• oncut: Sự kiện xảy ra khi người dùng cắt nội dung của một phần tử
• onpaste: Sự kiện xảy ra khi người dùng dán nội dung vào một phần tử
• oncopy: Sự kiện xảy ra khi người dùng sao chép nội dung của một phần tử

Các hàm sử dụng trong sự kiện:

• preventDefault(): Ngăn chặn sự kiện thực hiện hành động mặc định. Ví dụ, khi form được submit(), bạn có thể ngăn chặn việc submit mặc định và sử dụng Ajax để gửi yêu cầu.

Tên:

• element.addEventListener(event, function)

  • event: Tên sự kiện
  • function: Tên hàm sẽ được thực thi khi sự kiện xảy ra

• element.removeEventListener(event, function)

  • event: Tên sự kiện
  • function: Tên hàm sẽ được thực thi khi sự kiện xảy ra