Phương thức sự kiện jQuery

jQuery được thiết kế riêng để phản hồi các sự kiện trong trang HTML.

Sự kiện là gì?

Tất cả các hành động khác nhau của khách truy cập mà một trang web có thể phản hồi được gọi là sự kiện.

Một sự kiện đại diện cho thời điểm chính xác khi sự kiện đó xảy ra.

Ví dụ

Di chuyển chuột qua một phần tử
Chọn một nút radio
Nhấp vào một phần tử

Thuật ngữ "fires/fired" thường được sử dụng với các sự kiện. Ví dụ: "Sự kiện nhấn phím được kích hoạt, thời điểm chúng ta nhấn một phím".

Dưới đây là một số sự kiện DOM phổ biến:

Sự kiện Mouse	Sự kiện Keyboard	Sự kiện Form	Sự kiện Document/Window
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Cú pháp jQuery cho các phương thức sự kiện

Trong jQuery, hầu hết các sự kiện DOM đều có một phương thức jQuery tương đương.

Để chỉ định một sự kiện nhấp chuột cho tất cả các phần tử trên một trang, chúng ta có thể thực hiện như sau:

$("p").click();

Bước tiếp theo là xác định điều gì sẽ xảy ra khi sự kiện xảy ra. Chúng ta phải chuyển một hàm cho sự kiện.

$("p").click(function(){
// Code thực thi hành động
});

Các phương thức sự kiện jQuery thường được sử dụng

$(document).ready()

Phương thức $(document).ready() cho phép chúng ta thực hiện một hành động khi tài liệu được tải đầy đủ. Sự kiện này đã được giải thích trong bài Cú pháp jQuery.

click()

Phương thức click() gắn một hàm xử lý sự kiện cho một phần tử HTML.

Hàm được thực thi khi người dùng nhấp vào phần tử HTML.

Ví dụ sau cho thấy, khi một sự kiện nhấp chuột kích hoạt trên một phần tử , phần tử hiện tại sẽ bị ẩn.

Ví dụ

$(document).ready(function(e) {
    $("p").click(function(){
        $(this).hide();    
    })
});

Xem kết quả

dblclick()

Phương thức dblclick() gắn một hàm xử lý sự kiện cho một phần tử HTML.

Hàm được thực thi khi người dùng nhấp đúp vào phần tử HTML.

Ví dụ

$(document).ready(function(e) {
    $("p").dblclick(function(){
        $(this).hide();    
    })
});

Xem kết quả

mouseenter()

Phương thức mouseenter() gắn một hàm xử lý sự kiện cho một phần tử HTML.

Hàm được thực thi khi con trỏ chuột đi vào phần tử HTML.

Ví dụ

$(document).ready(function(e) {
    $("#demo").mouseenter(function(){
        alert("Bạn mới di chuột lên thẻ p");    
    })
});

Xem kết quả

mouseleave()

Phương thức mouseleave() gắn một hàm xử lý sự kiện cho một phần tử HTML.

Hàm được thực thi khi con trỏ chuột rời khỏi phần tử HTML.

Ví dụ

$(document).ready(function(e) {
    $("#demo").mouseleave(function(){
        alert("Bạn đã di chuột khỏi thẻ p");    
    })
});

Xem kết quả

mousedown()

Phương thức mousedown() gắn một hàm xử lý sự kiện cho một phần tử HTML.

Hàm được thực thi khi nhấn nút chuột trái, chuột giữa hoặc chuột phải trong khi chuột vẫn ở trên phần tử HTML.

Ví dụ

$(document).ready(function(e) {
    $("#demo").mousedown(function(){
        alert("Bạn mới nhấn chuột xuống");    
    })
});

Xem kết quả

mouseup()

Phương thức mouseup() gắn một hàm xử lý sự kiện cho một phần tử HTML.

Hàm được thực thi khi thả nút chuột trái, chuột giữa hoặc chuột phải trong khi chuột vẫn ở trên phần tử HTML.

Ví dụ

$(document).ready(function(e) {
    $("#demo").mouseup(function(){
        alert("Bạn mới nhả chuột ra");    
    })
});

Xem kết quả

hover()

Phương thức hover() gọi hai hàm, là sự kết hợp của mouseenter() và mouseleave().

Hàm đầu tiên được thực thi khi chuột đi vào phần tử HTML và hàm thứ hai được thực thi khi chuột rời khỏi phần tử HTML.

Ví dụ

$(document).ready(function(e) {
    $("#demo").hover(function(){
        alert("Bạn mới di chuột vào phần tử p");    
    }, function() {
        alert("Bạn đã di chuột ra khỏi phần tử p");    
    })
});

Xem kết quả

focus()

Phương thức focus() gắn một hàm xử lý sự kiện cho một trường biểu mẫu HTML.

Hàm được thực thi khi trường biểu mẫu có tiêu điểm.

Ví dụ

$(document).ready(function(e) {
   $("input").focus(function() {
         $(this).css("background-color","yellow");  
    })
});

Xem kết quả

focus()

Phương thức blur() gắn một hàm xử lý sự kiện cho một trường biểu mẫu HTML.

Hàm được thực thi khi trường biểu mẫu mất tiêu điểm.

Ví dụ

$(document).ready(function(e) {
   $("input").focus(function() {
         $(this).css("background-color","yellow");  
    })
  $("input").blur(function() {
        $(this).css("background-color","blue")   
    })
});

Xem kết quả

Phương thức on()

Phương thức on() gắn một hoặc nhiều xử lý sự kiện cho các phần tử lựa chọn.

Ví dụ sau gắn sự kiện nhấp chuột vào một phần tử .

Ví dụ

$(document).ready(function(e) {
    $("p").on("click", function() {
        $(this).hide();
    })    
});

Xem kết quả

Ví dụ sau gắn nhiều sự kiện vào một phần tử .

Ví dụ

$(document).ready(function(e) {
    $("p").on({
        mouseenter: function() {
            $(this).css("background-color","yellow");
        },
        mouseleave: function() {
            $(this).css("background-color","lightblue");
        },
        click: function() {
            $(this).css("background-color","red");
        }    
    })        
});