Jquery cơ bản-Sự kiện

2 bài viết trước mình đã giới thiệu về cú pháp trong jquery và các selectors trong jquery. Bài viết này sẽ là phần tiếp theo trong series bài về Jquery cơ bản. Hôm nay chúng ta sẽ cùng tìm hiểu một chút về các sự kiện trong Jquery. Jquery được hỗ trợ sẵn rất nhiều các sự kiện để tương tác với người dùng. Các sự kiện trong jquery thao tác đơn giản hơn khi ta sử dụng cùng loại sự kiện đó với Javascript. Sự kiện được hiểu một cách đơn giản là một phương thức được gọi ra để tương tác khi có một điều gì đó xảy ra với các thành phần HTML. Ví dụ những event đơn giản mà ta hay gặp nhất như onclick() xảy ra khi người dùng click và 1 phần tử trên HTML, hay onblur() khi phần tử HTML mất đi focus...
Cấu trúc của các sự kiện:

$(selector).event(function)

Selector: chính là phần tử HTML đã bị tác động gì đó của người dùng.
Event: tên sự kiện mà bạn muốn bắt.
Function: là đoạn code thực thi mà bạn muốn làm khi event được bắt.
Các bạn lưu ý như bài trước mình đã nói là code jquery luôn phải nằm trong khối $(document).ready().
Ngoài ra chúng ta cũng có 1 lưu ý nhỏ ở đây là bạn có thể thay dấu $ bằng một tên gọi khác nếu bạn muốn. Vì một số thư viện Javascript cũng dùng dấu $. Vì thế cũng rất dễ gây ra xung đột. Nếu trên tài liệu HTML của bạn có sử dụng nhiều thư viện javascript thì bạn nên lưu ý điều này. Để dùng một tên gọi khác bạn phải dùng đến phương thức jQuery.noConflict().

<script type="text/javascript">
var j=jQuery.noConflict();
j(document).ready(function(){
j("button").click(function(){
j("img").hide();
});
});
</script>

j: ở đây là một tên gọi tùy ý mà bạn muốn sử dụng, tốt nhất là nên là chữ gì đó gồm 1 hoặc 2 chữ cái cho dễ nhớ và dễ sử dụng hơn.
Còn bây giờ là một ví dụ nhỏ cho bài ngày hôm nay. Giả sử chúng ta có 1 đoạn HTML như sau:

<button id="btnSasuke">Sasuke Image</button>
<div id="divNaruto" style="width:450px;height:281px"></div>

Nó chỉ bao gồm 1 button và một div không chứa gì.
Và chúng ta có 3 class stylesheet có thuộc tính background-image

.sasuke
{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmR4ozwuYk2FQe1lr8vVmOcTCQdp8MTnrbW4_qjIdLpDm-cHS3PxzOS4byUQN04-JLieqWZQBV6cxQbTHVbty_aWPr6LFq7urDaDBHr0PNOP0WtHnIKOcIGnhU0ua7f3If0MW0p8aRIzq/s450/jquery-co-ban-su-kien-2.png");
}
.naruto
{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisnfISx5bIbLOPuMXHnFBKlVWAEd4qbDCpV0COpvsJw0moux8EdwUv02ctRn_D_KzA68vjlqTFxw30PzTPIv9Xghq9sVagLXZrQ8PHgASIJvqxa6e0V4OvI0kjWJRB6fR-JSLxPV3Ywtq4/s450/jquery-co-ban-su-kien.png");
}
.sakura
{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO9V7Z-8VKegO8rKccorJdEhISV3BwcfnYtNcbwKL26-W8qlAacEPtD-jNyZdfE6tJ7I8dRoo51n9XAmSl9oC3gHf_IOAHUqG-y8u4uVV-_HO4zPCAuEuY2DrRakWboRvT8P6XBZZ7VG0T/s450/jquery-co-ban-su-kien-3.png");
}

Và tiếp theo là một đoạn jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divNaruto").addClass("naruto");
$("#btnSasuke").click(function () {
$("#divNaruto").addClass("sasuke").removeClass("naruto").removeClass("sakura");
});
$("#divNaruto").dblclick(function () {
$("#divNaruto").addClass("naruto").removeClass("sasuke").removeClass("sakura");
});
$("#divNaruto").hover(function () {
$("#divNaruto").addClass("sakura");
});
});
</script>

Chúng ta sẽ cùng phân tích 1 số sự kiện sẽ diễn ra khi đoạn code này chạy. Đầu tiên khi toàn bộ trang được load lên thì sẽ có sự kiện load nằm trong phương thức read và lúc đó div sẽ có background là Naruto. Nếu click vào button btnSasuke thì sự kiện click trong jquery được gọi và lúc đó div sẽ có ảnh Sasuke. Và nếu bạn hover qua div thì sự kiện hover được gọi và div sẽ có ảnh Sakura. Và cuối cùng nếu bạn kích đúp và div thì div sẽ trở về ảnh ban đầu là Naruto. Đây là kết quả cho đoạn code trên:

Nếu các bạn muốn tìm hiểu đầy đủ về các sự kiện trong Jquery thì các bạn có thể vào đây. Chúc các bạn thành công!