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

Bài đăng này đã không được cập nhật trong 6 năm

Mở đầu

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é.

Các sự kiện cơ bản trong javascript

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. . Lúc này thì sự kiện onmousedown sẽ xảy ra và onmouseup với onclick sẽ không xảy ra được trên phần tử đầu. Điều tất yếu chức năng của sự kiện click chuột trên phần tử đầu sẽ không được thực hiện. Chỗ người dùng thả nút chuột sẽ có xảy ra sự kiện onmouseup với onclick và thực hiện luôn cả chức năng click chuột. - Khi người dùng double-click chuột thì đồng nghĩa với việc sẽ bôi đen phần văn bản được double-click. Để ngăn chặn điều này ta nên sử dụng thuộc tính 'user-select: none;' của css. Xem ví dụ sau

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 di chuyển vào phần tử
onmouseover: Sự kiện xảy ra khi con trỏ chuột di chuyển vào phần tử hoặc các con của nó

Ví dụ:

<div id="onmouseenter">
    <p>onmouseenter: <span id="demo1">Mouse over me!</span></p>
</div>

<div id="onmouseover">
    <p>onmouseover: <span id="demo2">Mouse over me!</span></p>
</div>

<script>

var x = 0;
var y = 0;

function myEnterFunction() {
    document.getElementById("demo1").innerHTML = x+=1;
}

function myOverFunction() {
    document.getElementById("demo2").innerHTML = y+=1;
}
</script>

Sự kiện đối lập với onmouseenter và onmouseover là onmouseleave và onmouseout.

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

Thuộc tính cơ bản

event.which: thể hiện nút chuột được bấm
- 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ị phím tương ứng được bấm hay không khi sự kiện chuột xảy ra. Có giá trị bằng true nếu phím đó được bấm.
event.clientX và event.clientY là 2 tọa độ của chuột trên mặt phẳng cửa sổ trình duyệt.
event.pageX và event.pageY là 2 tọa độ của chuột trên mặt phẳng trang (document).

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

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

onkeydown: Sự kiện xảy ra khi người dùng đang ấn 1 phím (sẽ được 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 ấn 1 phím (một số phím sẽ không kích hoạt sự kiện này như phím alt, shift, ctrl, esc, backspace, delete, các phím mũi tên...)
onkeyup: Sự kiện xảy ra khi người dùng thả 1 phím

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

event.key: kí tự của phím
event.keyCode: mã của phím
event.shiftKey, event.altKey, event.ctrlKey biểu thị phím tương ứng được bấm hay không khi sự kiện chuột xảy ra. Có giá trị bằng true nếu phím đó được bấm. Chú ý:
- 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 trình duyệt
onscroll: Sự kiện xảy ra khi thanh cuộn của phần tử đang được cuộn

Chú ý:
- Khi bạn thay đổi kích thước cửa sổ làm cho vị trí cuộn của trang bị ảnh hưởng cũng sẽ kích hoạt sự kiện scroll

Sự kiện form

onfocus: Sự kiện xảy ra khi thành phần được tập trung. Một thành phần được focus như là một ô nhập liệu có con trỏ ở bên trong. Một ô check box hoặc radio được tab vào hoặc click vào 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 rời bỏ sự tập trung.
onchange: Sự kiện xảy ra khi thành phần đã được thay đổi nội dung, giá trị. Đối với ô <input>, <keygen>, <select>, và <textarea>.

Đối với ô nhập liệu khi người sử dụng thay đổi giá trị của ô nhập liệu và thoát khỏi ô nhập đó (blur) thì sự kiện onchange mới được kích hoạt.

Còn khi người dùng nhập dữ liệu vào ô input hoặc textarea mà mình cần lấy giá trị để validate thì sao. 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

Chú ý:
- Đối với các ô select, checkbox, radio thì cũng có sự kiện oninput nhưng tùy trình duyệt bạn sử dụng. Như google chrome thì không có sự kiện oninput cho các ô checkbox, radio. Vì vậy chỉ nên sử dụng sự kiện oninput với các ô nhập liệu thôi.
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 gửi đi.
onreset: Sự kiện sảy ra khi form được reset về giá trị mặc định.

Sự kiện Drag, Drop

Sự kiện này cho phép chúng ta kéo thả 1 phần tử vào vị trí khác. Những thẻ muốn kéo thả được thì cần phải có thuộc tính draggable="true". Ví dụ: <img id="drag" src="img.png" draggable="true" width="336" height="69">

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 nào xảy ra khi một phần tử bị 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 vào mục tiêu
ondragover: Sự kiện xảy ra khi phần tử bị 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 rời khỏi mục tiêu thả
ondrop: Sự kiện xảy ra khi phần tử bị kéo được thả vào mục tiêu thả

Ví dụ về kéo thả một thẻ 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 một số nội dung vào trong 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 của sự kiện hay dùng:

preventDefault(): Ngăn chặn sự kiện thực hiện chức năng mặc định. Ví dụ ta có một sự kiện submit() form, nhưng ta không muốn nó submit bình thường mà dùng ajax gửi request chẳng hạn thì mình sẽ dùng hàm preventDefault() để ngăn chặn form submit bình thường.

<form id="myForm">
  Name: <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

<script>
document.getElementById("myForm").addEventListener('submit', myFunction);

function myFunction(event) {
	event.preventDefault();
	$.ajax({
		//Enter your code
	});
    console.log('The form was submitted');
}
</script>

element.addEventListener(event, function)
- event: tên sự kiện
- function: tên hàm sẽ thự hiện khi sự kiện xảy ra
element.removeEventListener(event, function)
- event: tên sự kiện
- function: tên hàm sẽ thự hiện khi sự kiện xảy ra