JQuery Event: Sự Kiện Trong JQuery - Freetuts

Trong bài này này chúng ta sẽ tìm hiểu sự kiện trong jQuery, qua đó bạn sẽ biết cách thêm sự kiện, cũng như danh sách tất cả các sự kiện jQuery thường dùng nhất.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Sự kiện trong jQuery thực chất cũng giống như sự kiện trong Javascript, chỉ là nó được viết lại với một cú pháp mới, đơn giản và hiệu quả hơn so với javascript thuần. Nếu bạn rành Javascript rồi thì học jQuery không mấy khó khăn. Nhưng nếu bạn chưa biết Javascript thì sẽ hơi khó một chút. Vì vậy, mình nghĩ bạn cũng nên học Javascript trước khi học sang jQuery.

1. Sự kiện trong jQuery là gì?

Trong jQuery, sự kiện là tập hợp những hành động xảy ra ảnh hưởng trực tiếp đến các DOM node trong tài liệu HTML. Thực chất đó cũng là các sự kiện trong javascript, chỉ có điều là thay vì sử dụng javascript thuần thì ta sẽ sử dụng jQuery để xử lý các sự kiện đó.

Các sự kiện được phân ra từng nhóm, mỗi nhóm sẽ có đặc điểm chung, và có thể sự kiện ở nhóm này không sử dụng được ở nhóm khác.

Bài viết này được đăng tại [free tuts .net]

Trước khi tìm hiểu kỹ hơn về các nhóm thì hãy cùng mình xem danh sách tất cả các sự kiện trong jQuery đã nhé.

Tên sự kiện	Giải thích
bind()	Bổ sung sự kiện vào đối tượng
blur()	Xảy ra khi ra khỏi đối tượng DOM
change()	Xảy ra khi giá trị bị thay đổi
click()	Xảy ra khi click vào đối tượng
contextmenu()	Xảy ra khi click chuột phải
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
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
hover()	Xảy ra khi hover chuột vào đối tượng
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
live()	Bổ sung sự kiện vào đối tượng, từ version 1.7 sẽ thay thế bằng sự kiện on()
load()	Xảy ra khi đối tượng bắt đầu load
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
ready()	Xảy ra khi browser đã load xong
resize()	Xảy ra khi resize browser
scroll()	Xảy ra khi kéo thanh cuộn
submit()	Xảy ra khi form được submit
toggle()	Xảy ra khi click vào đối tượng

2. Cách thêm sự kiện trong jQuery

Để gắn một hành động vào một sự kiện nào đó thì ta sử dụng cú pháp như sau:

$('selector').[event_name](function() { // Hành động });

Trong đó selector chính là bộ lọc trỏ đến thẻ html cần gắn sự kiện, event_name chính là tên của sự kiện.

Ví dụ: Gắn một hành động khi click vào button có id là btn.

$('#btn').click(function(){ // Hành động });

Bạn cũng có thể dùng hàm on() để gắn sự kiện cho một thẻ HTML bất kì.

$( "selector" ).on( "event_name", function() { // Hành động });

Mình sẽ viết lại ví dụ trên như sau:

$( "html #btn" ).on( "click", function() { // Hành động });

3. Cách hủy bỏ sự kiện trong jQuery

Khi bạn đã gắn sự kiện rồi thì hoàn toàn có thể hủy bỏ chúng bằng cách sử dụng hàm off().

Cú pháp như sau:

$("body").off( "[event_name]", "selector", action)

Trong đó:

• event_name là tên của sự kiện.
• selector là đối tượng cần bỏ sự kiện.
• action là hành động mà bạn đã gắn vào sự kiện, nó sẽ là một function.

Như vậy, để hủy bỏ một hành động thì ta phải gom hành động đó vào một hàm, bởi việc xóa hành động của sự kiện sẽ thông qua tên hàm mà ta đã gắn.

Ví dụ: Gắn sự kiện click vào button có id="result".

function showResult(){ // code } $('#result').click(showResult);

Khi click vào button #result thì sẽ chạy hàm showResult. Bây giờ nếu muốn hủy bỏ hành động này thì ta sẽ viết như sau:

$('#result').off("click", "#result", showResult);

4. Mouse Event trong Javascript

Mouse event là những sự kiện liên quan đến chuột máy tính. Chúng ta có năm hành động chủ yếu là click, dblclick, mouseenter, mouseleave và hover.

Hàm click()

Sự kiện click xảy ra khi chúng ta dùng chuột click vào phạm vi hiển thị của phần tử HTML.

Hàm click() dùng để gắn sự kiện click, nó có một tham số truyền vào, đó chính là một hàm chứa những hành động sẽ được thực thi khi sự kiện click xảy ra. Ví dụ dưới đây sẽ ẩn thẻ p khi click chuột vào chúng.

Ví dụ RUN $(document).ready(function(){ $("p").click(function(){ $(this).slideUp(); }); });

Hàm dblclick()

Hàm dblclick() dùng để gắn hành động vào sự kiện click đúp chuột. Nó có một tham số truyền vào, đó chính là hàm sẽ được gọi khi sự kiện đúp chuột xảy ra. Ví dụ dưới đây sẽ ẩn thẻ p khi bạn click đúp chuột vào chúng.

Ví dụ RUN $(document).ready(function(){ $("p").dblclick(function(){ $(this).slideUp(); }); });

Hàm hover()

Hàm hover() dùng để gắn hành động vào sự kiện hover chuột, nó có hai tham số truyền vào:

• Tham số đầu tiên là một hàm, sẽ được gọi khi hover chuột vào.
• Tham số thứ hai là một hàm, sẽ được gọi khi hover chuột ra ngoài. Bạn có thể không cần truyền tham số này.

Ví dụ dưới đây sẽ đổi background sang màu vàng khi hover chuột vào, và trở lại backbround cũ khi đưa chuột ra ngoài.

Ví dụ RUN $(document).ready(function(){ $("p").hover(function(){ $(this).addClass("highlight"); }, function(){ $(this).removeClass("highlight"); }); });

Hàm mouseenter()

Hàm mouseenter() dùng để gắn hành động khi hover chuột vào, nó có một tham số truyền vào, đó chính là hàm sẽ được gọi khi xảy ra sự kiện di chuyển chuột vào các thẻ html.

$(document).ready(function(){ $("p").mouseenter(function(){ $(this).addClass("highlight"); }); });

Hàm mouseleave()

Hàm mouseleave() dùng để gắn hành động khi đưa chuột ra ngoài, nó có một tham số truyền vào, đó chính là hàm sẽ được gọi khi di chuyển chuột ra ngoài thẻ html. Có thể thấy hàm hover() chính là sự kết hợp giữa hai hàm mouseenter() và mouseleave().

Ví dụ dưới đây là mình viết lại bằng cách sử dụng hai hàm mouseenter() và mouseleave() thay thế cho hover().

Ví dụ RUN $(document).ready(function () { $("p").mouseenter(function () { $(this).addClass("highlight"); }); $("p").mouseleave(function () { $(this).removeClass("highlight"); }); });

5. Keyboard Events trong jQuery

Keyboard Events là tập hợp những sự kiện liên quan đến bàn phím, thường là những hành động gõ phím, nhả phím như: keypress(), keydown() và keyup().

Hàm keypress()

Hàm keypress() dùng để gắn hành động cho sự kiện gõ phím xuống, nó có một tham số truyền vào, đó chính là hàm sẽ được gọi khi bạn gõ một phím bất kì. Ví dụ dưới đây sẽ hiển thị một thông báo, kèm theo đó là số lần bạn đã nhấn phim trong ô input.

Ví dụ RUN $(document).ready(function(){ var i = 0; $('input[type="text"]').keypress(function(){ $("span").text(i += 1); $("p").show().fadeOut(); }); });

Hàm keydown()

Hàm keydown() dùng để gắn hành động cho sự kiện gõ phím, nó có một tham số truyền vào, đó chính là hàm sẽ được gọi khi bạn gõ phím. Tương tự, ví dụ dưới đây sẽ hiển thị thông báo và số lần mà bạn đã nhấn phím.

Ví dụ RUN $(document).ready(function(){ var i = 0; $('input[type="text"]').keydown(function(){ $("span").text(i += 1); $("p").show().fadeOut(); }); });

Hàm keyup()

Khác với hai hàm trên, hàm keyup() dùng để gắn hành động cho sự kiện nhả phím. Nó có một tham số truyền vào, đó chính là hàm sẽ được gọi khi bạn nhả phím ra. Ví dụ dưới đây sẽ hiển thị thông báo và số lần mà bạn đã nhả phím.

Ví dụ RUN $(document).ready(function(){ var i = 0; $('input[type="text"]').keyup(function(){ $("span").text(i += 1); $("p").show().fadeOut(); }); });

6. Form Events trong javascript

Form events là những sự kiện liên quan đến form, nó chỉ tồn tại trong các thẻ nhập dữ liệu như input, textarea, select.. Dưới đây là một số hàm thường dùng để bắt các sự kiện liên quan đến form trong jQuery.

Hàm change()

Hàm change() dùng để gắn hành động cho sự kiện thay đổi giá trị trên các thẻ select, textarea, input.. Nó có một tham số truyền vào, đó chính là hàm sẽ được gọi khi giá trị của các thẻ đó bị thay đổi. Ví dụ dưới đây sẽ hiển thị một thông báo khi bạn chọn thành phố trong select box.

Demo RUN $(document).ready(function(){ $("select").change(function(){ var selectedOption = $(this).find(":selected").val(); alert("You have selected - " + selectedOption); }); });

Lưu ý: Đối với select box, input radio, input checkbox thì sự kiện change xảy ra khi bạn sử dụng chuột để chọn các tùy chọn. Còn đối với textbox, textarea thì xảy ra khi bạn nhập dữ liệu.

Hàm focus()

Hàm focus() dùng để gán hành động cho sự kiện con trỏ chuột focus vào các phần tử HTML như: Các ô input, textarea, select, checkbox, radio, thẻ a, và những thẻ cho phép con trỏ chuột tác động vào. Ví dụ dưới đây sẽ hiển thị thông báo khi bạn focus vào hai ô textbox.

Ví dụ RUN $(document).ready(function(){ $("input").focus(function(){ $(this).next("span").show().fadeOut("slow"); }); });

Hàm blur()

Ngược lại hàm focus(), hàm blur() dùng để gán hành động cho sự kiện con trỏ chuột rời khỏi phần tử HTML. Nó cũng có một tham số truyền vào, đó chính là hàm sẽ được gọi khi con trỏ chuột rời khỏi vị trí của thẻ HTML đó. Ví dụ dưới đây sẽ hiển thị thông báo khi xảy ra sự kiện blur.

Ví dụ RUN $(document).ready(function(){ $("input").blur(function(){ $(this).next("span").show().fadeOut("slow"); }); });

Hàm submit()

Submit() là hàm được sử dụng rất nhiều khi làm việc với form. Nó cho phép bạn gán hành động khi xảy ra sự kiện submit, tức là khi bạn enter hoặc click chuột vào input submit.

$(document).ready(function(){ $("form").submit(function(event){ // Hành động }); });

7. Document/Window Events trong jQuery

Đây là những sự kiện liên quan đến DOM, các đối tượng window và document.

Hàm ready()

Hàm ready() dùng để gán hành động khi toàn bộ tài nguyên trên trang web đã được load xong. Hàm này chúng ta đã sử dụng rất nhiều ở các ví dụ trên.

$(document).ready(function(){ $("p").text("The DOM is now loaded and can be manipulated."); });

Hàm resize()

Đây là một hàm thuộc đối tượng window, dùng để gắn sự kiện khi người dùng resize kích thước của trình duyệt. Ví dụ dưới đây sẽ hiển thị kích thước chiều rộng và chiều cao của trình duyệt khi người dùng thay đổi kích thước.

Ví dụ RUN $(document).ready(function(){ $(window).resize(function() { $(window).bind("resize", function(){ $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height()); }); }); });

Hàm scroll()

Giống với hàm resize(), hàm scroll dùng gắn hành động cho sự kiện cuộn trang web (scroll). Nó có thể áp dụng cho iframe, hoặc các thẻ HTML có thuộc tính overflow scroll.

Ví dụ RUN $(document).ready(function(){ $(window).scroll(function() { $("p").show().fadeOut("slow"); }); });

8. Lời kết

Như vậy là mình đã hướng dẫn xong cách xử lý sự kiện trong jQuery. Qua bài này bạn đã hiểu được khái niệm sự kiện trong jQuery là gì? Cách thêm một sự kiện bằng jQuery, cách hủy bỏ sự kiện trong jQuery.

Bài này cũng tương đối đơn giản, bởi hầu hết các kiến thức chúng ta đã được học ở series javascript căn bản.