Sự kiện Click() trong Jquery

Ngôn ngữ Jquery khá mạnh mẽ trong việc bắt sự kiện. Nó sẽ lắng nghe người dùng thực hiện hành vi từ đó thực thi các chức năng đáp ứng lại. Bài viết này chúng ta cùng tìm hiểu về Sự kiện click() trong jQuery. Và thực hiện các bài tập ví dụ để tường tận hơn.

Cách viết sự kiện Click()

$(selector).click(function() {

// Code thực thi sau khi sự kiện click() xảy ra

}

)

Ví dụ:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ví dụ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert(" Sự kiện Click đã thực thi! ");
});
});
</script>
</head>

<body>

<p>Nhấp vào đây!</p>

</body>
</html>

Kết quả là một hộp cảnh báo xuất hiện

Ví dụ tiếp theo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#an").click(function(){
$("h2").hide();
});
$("#hien").click(function(){
$("h2").show();
});
});
</script>
</head>
<body>

<h2>Nếu bạn nhấp vào Button ẩn văn bản sẽ biến mất, ấn vào Button hiện sẽ hiện ra.</h2>

<button id="an">Ẩn</button>
<button id="hien">Hiện</button>

</body>
</html>

Ngoài sự kiện click() thì một số Event cũng thường gặp như:

dblclick: nhấp đôi chuột lên phần tử
mouseenter: khi chuột đi vào phần tử
mouseleave: khi con chuột rời khỏi phần tử.
mouseover: khi con chuột trên phần tử.

Sau khi tìm hiểu xong click() và thực hành ví dụ bạn thấy có thú vị không. Jquery có nhiều thứ hay ho để khám phá nữa đấy. Hãy đón chờ những bài tiếp theo của mình nhé!