Jquery xử lý sự kiện
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. Show
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é.
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 đó Ví dụ: Gắn một hành động khi click vào button có id là $('#btn').click(function(){ // Hành động }); Bạn cũng có thể dùng hàm $( "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 jQueryKhi 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 Cú pháp như sau: $("body").off( "[event_name]", "selector", action) Trong đó:
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ó function showResult(){ // code } $('#result').click(showResult); Khi click vào button $('#result').off("click", "#result", showResult); 4. Mouse Event trong JavascriptMouse 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à 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 $(document).ready(function(){ $("p").click(function(){ $(this).slideUp(); }); }); Hàm dblclick()Hàm $(document).ready(function(){ $("p").dblclick(function(){ $(this).slideUp(); }); }); Hàm hover()Hàm
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. $(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 Ví dụ dưới đây là mình viết lại bằng cách sử dụng hai hàm $(document).ready(function () { $("p").mouseenter(function () { $(this).addClass("highlight"); }); $("p").mouseleave(function () { $(this).removeClass("highlight"); }); }); 5. Keyboard Events trong jQueryKeyboard 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ư: 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. $(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. $(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. $(document).ready(function(){ var i = 0; $('input[type="text"]').keyup(function(){ $("span").text(i += 1); $("p").show().fadeOut(); }); }); 6. Form Events trong javascriptForm 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. $(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. $(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. $(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. $(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. $(document).ready(function(){ $(window).scroll(function() { $("p").show().fadeOut("slow"); }); }); 8. Lời kếtNhư 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. |