Sự kiện trong jQuery

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.

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.

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.

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

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
});

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);

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.

$(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ụ

$(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ụ

$(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ụ

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

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ụ

$(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ụ

$(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ụ

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

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

$(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ụ

$(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ụ

$(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
    });
});

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ụ

$(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");
    });
});

PreviousjQuery selector là gì?NextShow() và Hide() trong jQuery

Last updated 2 years ago

Tên sự kiện

Giải thích

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

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