01/10/2018, 16:45

Sự kiện trong jQuery - JQuery events

1. Sư kiện là gì??? Sự kiện sinh ra để phản hồi lại các tương tác của người dùng với trang web. Có lẽ chúng ta đã khá quen thuộc với các sự kiện như onclick, onmousedown, onkeydown,…… trong javascript. JQuery tất nhiên cũng cung cấp đầy đủ những sự kiện trong javascript. Không chỉ ...

1. Sư kiện là gì???

Sự kiện sinh ra để phản hồi lại các tương tác của người dùng với trang web. Có lẽ chúng ta đã khá quen thuộc với các sự kiện như onclick, onmousedown, onkeydown,…… trong javascript. JQuery tất nhiên cũng cung cấp đầy đủ những sự kiện trong javascript. Không chỉ vậy, với cú pháp xử lý đơn giản, dễ hiểu nó còn làm được nhiều hơn thế.

Khi người dùng click vào một phần tử
Di chuyển con chuột trên 1 phần tử
Chọn 1 nút radio/ checkbox

2. Một số sự kiện phổ biến DOM

Tên sự kiện	Giải thích
ready()	Xảy ra khi browser đã load xong
load()	Xảy ra khi đối tượng bắt đầu load
resize()	Xảy ra khi resize browser
scroll()	Xảy ra khi kéo thanh cuộn
toggle()	Xảy ra khi click vào đối tượng
bind()	Bổ sung sự kiện vào đối tượng
contextmenu()	Xảy ra khi click chuột phải
click()	Xảy ra khi click vào đối tượng
dbcclick()	Xảy ra click double chuột
delegate()	Bổ sung sự kiện vào đối tượng cả trước và sau khi thêm bằng Javascript
die()	Xóa bỏ sự kiện ra khỏi đối tượng
error()	Xay ra khi xuất hiện lỗi trên đối tượng
hover()	Xảy ra khi hover chuột vào đối tượng
live()	Bổ sung sự kiện vào đối tượng, từ version 1.7 sẽ thay thế bằng sự kiện on()
Sự kiện Form
focus()	Xảy ra khi focus vào đốit tượng (con trỏ chuột đang xử lý tại đối tượng)
focusin()	Giống focus nhưng bổ sung thêm điều kiện là sự kiện đang ở trạng thái mới vào
focusout()	Giống focus nhưn bổ sung thêm điều kiện là sự kiện đang ở trạng thái dừng
blur()	Xảy ra khi ra khỏi đối tượng
change()	Xảy ra khi giá trị bị thay đổi
submit()	Xảy ra khi form được submit
Sự kiện Mouse
mousedown()	Xảy ra khi nhấn chuột trái xuống
mouseup()	Xảy ra khi nhả chuột trái ra
mouseenter()	Xảy ra khi con trỏ chuột đi vào phạm vi của đối tượng
mouseleave()	Xảy ra khi con trỏ chuột đi ra ngoài phạm vi của đối tượng
mousemove()	Xảy ra khi con trỏ chuột đang di chuyển bên trong đối tượng
mouseover()	Xảy ra một lần duy nhất khi con trỏ chuột bắt đầu đi vào phạm vi đối tượng
mouseout()	Xảy ra một lần duy nhất khi con trỏ chuột đi ra ngoài phạm vi đối tượng
Sự kiện Keyboard
keydown()	Xảy ra khi bàn phím nhấn xuống
keypress()	Xảy ra khi bàn phím nhấn xuống
keyup()	Xảy ra khi nhả bàn phím

3.Cú pháp jQuery cho các phương thức sự kiện

Trong jQuery, đa số các sự kiện DOM đều có phương thức jQuery tương ứng. Để gán một sự kiện nhấn chuột (click) cho tất cả các thẻ <p/> trong một trang, chúng ta có thể dùng:

$("p").click();

Bước tiếp theo chúng ta cần định nghĩa hàm thực thi khi xảy ra sự kiện nhấn chuột.

$("p").click(function(){
  // viết đoạn mã thực thi khi xảy ra sự kiện click chuột ở đây
});

4. Một số sự kiện thường sử dụng trong JQuery.

4.1 $(document).ready()

Phương thức này cho phép thực thi các khối lệnh JQuery Javascript khi toàn bộ DOM đã được tải về hoàn tất và sẵn sàng.

Ngoài phương thức này JQuery còn một số phương thức khác ở dạng rút gọn hay tinh giản.

$().ready(function(){
	// Some code
});
// Hoặc
$(function(){

});

4.2 Sự kiện click()

Phương thức này gán một hàm xử lý sự kiện vào một phần tử HTML. Hàm này chỉ được thực thi khi người dùng nhấp chuột lên phần tử đích HTML đó.

Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo sự kiện click trong JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	<p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net. Bạn vui lòng click vào đây nhé</p>
	<script type="text/javascript">
    	$().ready(function(){
			$("p").click(function(){
				alert('Ôi. Bạn click vào tôi thật đấy ah');
			});
		});
    </script>
</body>
</html>

Xem kết quả

4.3 Sự kiện hover()

Phương thức này là sự kết hợp của 2 phương thức mouseenter() và mouseleave(). Hàm đầu tiên thực thi khi chuột được di chuyển trên phần tử HTML, và hàm thứ 2 được thực thi khi chuột rời khỏi phần tử HTML đó.

$(selector).hover(function(event){
	// Some code
});
// Hoặc
$(selector).hover(function(){
	// Mouse on
}, function(){
	// Mouse out
});

Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo sự kiện hover() trong JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	<p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net. Bạn vui lòng di chuột vào đây</p>
	<script type="text/javascript">
    	$().ready(function(){
			$("p").hover(function(){
				alert('Bạn đang di chuột vào tôi !');
			}, function(){
				alert('Đừng bỏ tôi đi mà !');
			});
		});
    </script>
</body>
</html>

Xem kết quả

4.4. Sự kiện show()/hide() và fadeIn()/fadeOut()

Phương thức show() & fadeIn() hiện phần tử HTML được gán sự kiện. Ngược lại với nó hide() và fadeOut() ẩn phần tử HTML được gán sự kiện.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo sự kiện hover() trong JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net.</p>
    <button type="button" class="hide">Ẩn</button>
    <button type="button" class="show">Hiện</button>
    <div class="para" style="awidth:100px; height:100px; background:#03C"></div>
	<script type="text/javascript">
    	$().ready(function(){
			$(".hide").click(function(){
				$('.para').hide(); $('.para').fadeOut();
			});
			$(".show").click(function(){
				$('.para').show(); // $('.para').fadeIn();
			});
		});
    </script>
</body>
</html>

Xem kết quả

4.5 Sự kiện change()

Sự kiện change được thực thi khi bạn thay đổi giá trị của một điều khiển của Form như là input, select, textarea, radio,...

Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo sự kiện change() trong JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net.</p>
    <p>
    	<label>Input text</label>
        <input type="text" id="input" placeholder="Nhập vào một ký tự bất kỳ" />
    </p>
    <p>
    	<label>Select box</label>
        <select id="select">
        	<option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </p>
     <p>
    	<label>Radio</label>
        <input type="radio" name="gender" value="Male" /> Male
        <input type="radio" name="gender" value="FeMale" /> FeMale
    </p>
	<script type="text/javascript">
    	$().ready(function(){
			$('#input').change(function(){
				alert("Value = "+$(this).val());
			});
			$('#select').change(function(){
				alert("Value = "+$(this).val());
			});
			$('input[name=gender]').change(function(){
				alert("Value = "+$(this).val());
			});
		});
    </script>
</body>
</html>

Xem kết quả

4.6 Sự kiện keypress() / keydown() / keyup()

keypress: Sự kiện keypress xảy ra khi ta nhấn một phím bất kỳ trên bàn phím.
keydown: Sự kiện keydown xảy ra khi ta nhấn một phím bất kỳ trên bàn phím xuống.
keyup: Sự kiện keyup xảy ra khi ta nhả một phím bất kỳ trên bàn phím nên.

Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo sự kiện keypress() / keydown() / keyup() trong JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net.</p>
    <p>
    	<label>Keypress</label>
        <input type="text" id="keypress" placeholder="Nhập vào một ký tự bất kỳ" />
    </p>
    <p>
    	<label>Keydown</label>
        <input type="text" id="keydown" placeholder="Nhập vào một ký tự bất kỳ" />
    </p>
    <p>
    	<label>Keyup</label>
        <input type="text" id="keyup" placeholder="Nhập vào một ký tự bất kỳ" />
    </p>
	<script type="text/javascript">
    	$().ready(function(){
			$('#keypress').keypress(function(ev){
				alert("Value = "+ev.keyCode);
			});
			$('#keydown').keydown(function(ev){
				alert("Value = "+ev.keyCode);
			});
			$('#keyup').keyup(function(ev){
				alert("Value = "+ev.keyCode);
			});
		});
    </script>
</body>
</html>

Xem kết quả

4.7 Sự kiện focus() & blur()

Phương thức focus() được thực thi khi trường dữ liệu trên form được chọn. Ngược lại blur() áp dụng khi người dùng rời chọn trường dữ liệu đó.

Ví dụ: Khi chọn (focus) trường nhập liệu thì trường đó có màu nền #CCC, khi bỏ chọn (blur) thì trường nhập liệu có màu nền là màu #FFF.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("input").focus(function(){
			$(this).css("background-color", "#CCC");
		});
		$("input").blur(function(){
			$(this).css("background-color", "#FFF");
		});
	});
</script>
</head>
<body>
	<form method="post" action="">
        <h2>Đăng ký thành viên tại dammio.com </h2>
        <p>Họ & tên: <input type="text" name="fullname"></p>
        <p>Email: <input type="text" name="email"></p>
    </form>
</body>
</html>

Xem kết quả

4.8 Lồng các sự kiện.

Trên thực tế đôi khi ta cần gán nhiều các sự kiện cho một phần tử bất kỳ. Trong JQuery hoàn toàn cho phép chúng ta làm được được đó thông qua một số hàm trung gian như hàm on(), bind()... Ngoài ra ta còn có thể viết chuỗi các hàm nối nhau bằng dấu (.).

$(selector).action1().action2().action3();
// Hoặc
$(selector).bind('action1, action2', function(){
	// Some code
});
// Hoặc
$(selector).on({
	action1: function(){
		// Some code
	},
	action2: function(){
		// Some code
	}
});

Lưu ý: Hết câu lệnh javascript bạn nên sử dụng dấu (.)

Ví dụ: Chúng ta có một hình vuông. Mình sẽ làm nó ẩn đi(fadeOut) sau 2s nó lại hiện nên(fadeIn).

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.square')
			.fadeOut()
			.delay(2000)
			.fadeIn();
	});
</script>
</head>
<body>
	<div class="square" style="awidth:100px; height:100px; background:#00C;"></div>
</body>
</html>

Xem kết quả

Ví dụ 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("p").on({
			mouseenter: function(){
				$(this).css("background-color", "lightgray");
			},  
			mouseleave: function(){
				$(this).css("background-color", "lightblue");
			}, 
			click: function(){
				$(this).css("background-color", "yellow");
			}  
		});
	});
</script>
</head>
<body>
	<p class="para">Rê chuột, nhấn chuột, rê chuột ra ngoài để thấy các hiệu ứng đổi màu. --- dammio.com</p>
</body>
</html>

Xem kết quả

5. Kết luận.

Trong JQuery có rất nhiều hàm xử lý sự kiện và chúng rất đa dạng trong bài viết này mình không thể liệt kê hết ở bài viết này. Nhưng trên đây là một vài sự kiện phổ biến chúng ta hay sử dụng nhất. Hy vọng bài viết có ích với các bạn.

Bình luận về bài viết này

Tạ Quốc Bảo

23 chủ đề

7270 bài viết

Sự kiện trong jQuery - JQuery events

1. Sư kiện là gì???

2. Một số sự kiện phổ biến DOM

3.Cú pháp jQuery cho các phương thức sự kiện

4. Một số sự kiện thường sử dụng trong JQuery.

4.1 $(document).ready()

$().ready(function(){ // Some code }); // Hoặc $(function(){ });
4.2 Sự kiện click()

4.3 Sự kiện hover()

4.4. Sự kiện show()/hide() và fadeIn()/fadeOut()

4.5 Sự kiện change()

4.6 Sự kiện keypress() / keydown() / keyup()

4.7 Sự kiện focus() & blur()

4.8 Lồng các sự kiện.

5. Kết luận.

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

Sự kiện trong jQuery - JQuery events

1. Sư kiện là gì???

2. Một số sự kiện phổ biến DOM

3.Cú pháp jQuery cho các phương thức sự kiện

4. Một số sự kiện thường sử dụng trong JQuery.

4.1 $(document).ready()

$().ready(function(){ // Some code }); // Hoặc $(function(){ }); 4.2 Sự kiện click()

4.3 Sự kiện hover()

4.4. Sự kiện show()/hide() và fadeIn()/fadeOut()

4.5 Sự kiện change()

4.6 Sự kiện keypress() / keydown() / keyup()

4.7 Sự kiện focus() & blur()

4.8 Lồng các sự kiện.

5. Kết luận.

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

$().ready(function(){ // Some code }); // Hoặc $(function(){ });
4.2 Sự kiện click()