Jquery Events

11/09/2019

Bài sau » « Bài trước

Events là gì ?

Events là tất cả các hành động của user mà trang web có thể phản hồi.


  • Di chuột lên 1 phần tử

  • Checked vào thẻ input

  • Click vào button
  • ...

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

Mouse EventsKeyboard EventsForm EventsDocument/Window Events
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleave blurunload

Cú pháp jquery cho event

Trong jQuery, hầu hết các sự kiện DOM có một phương thức jQuery tương đương. Để chỉ định một sự kiện click chuột cho tất cả các thẻ <p> trên một trang, bạn có thể viết như sau:

$("p").click();

Sau đó bạn cần xác định hành động gì sẽ diễn ra khi thẻ <p> được click. Và bạn phải truyền vào 1 function cho nó:

$("p").click(function(){ // hành động khi thẻ p được click });

Một số jquery event thường dùng

$(document).ready()

Phương thức $(document).ready() cho phép chúng ta thực thi một function khi tài liệu được tải đầy đủ. Phần này đã đề cập ở bài giới thiệu jquery.

click()

Sự kiện click() xảy ra khi user click vào phần tử HTML.

Ví dụ sau mô tả khi user click vào thẻ p thì nó sẽ ẩn đi.

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

dblclick()

Sự kiện dblclick() xảy ra khi user click vào phần tử HTML 2 lần.

Ví dụ sau mô tả khi user double click vào thẻ p, thì nó sẽ ẩn đi.

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

mouseenter()

Sự kiện mouseenter() xảy ra khi user đưa chuột lên phần tử HTML.

Ví dụ sau mô tả khi user đưa chuột lên thẻ p, thì hiển thị câu thông báo bằng lệnh alert():

$("p").mouseenter(function(){ alert(‘Bạn vừa đưa chuột lên p’); });

mouseleave()

Sự kiện mouseleave() xảy ra khi user đưa chuột ra ngoài phần tử HTML.

Ví dụ sau mô tả khi user đưa chuột ra ngoài thẻ p, thì hiển thị câu thông báo bằng lệnh alert():

$("p").mouseleave(function(){ alert(‘Bạn vừa đưa chuột ra khỏi p’); });

mousedown()

Sự kiện mousedown() xảy ra khi user nhấn nút chuột trái, giữa hoặc phải khi đang đưa chuột lên phần tử HTML.

Ví dụ sau mô tả khi user đưa chuột lên thẻ p và nhấn chuột, thì hiển thị câu thông báo bằng lệnh alert():

$("p").mousedown(function(){ alert(‘Bạn vừa nhấn nút chuột lên thẻ p’); });

mouseup()

Sự kiện mouseup() xảy ra sau khi khi user bỏ nhấn chuột trái, giữa hoặc phải khi đang đưa chuột lên phần tử HTML.

Ví dụ sau mô tả khi user đưa chuột lên thẻ p, nhấn chuột và sau đó bỏ nhấn chuột, thì hiển thị câu thông báo bằng lệnh alert():

$("p").mouseup(function(){ alert(‘Bạn vừa bỏ nhấn chuột lên thẻ p’); });

hover()

Sự kiện hover() nhận vào 2 function và là sự kết hợp giữa mouseentermouseleave().

Function đầu tiên thực thi khi user đưa chuột lên (mouseenter) và function thứ 2 thực thi khi user đưa chuột ra ngoài (mouseleave).

$("#p").hover(function(){ alert("Bạn vừa đưa chuột lên p!"); }, function(){ alert("Tạm biệt. Bạn vừa đưa chuột ra ngoài p!"); });

focus()

Sự kiện focus() xảy ra khi user đưa chuột lên các trường thông tin trong form.

Ví dụ sau mô tả khi user click chuột vào thẻ input, thì đổi màu nền background:

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

blur()

Sự kiện blur() xảy ra khi user đưa chuột ra ngoài các trường thông tin trong form.

Ví dụ sau mô tả khi user click chuột ra ngoài thẻ input, thì đổi màu nền background:

$("input").focus(function(){ $(this).css("background-color", "green"); });

on()

Sự kiện on() tích hợp 1 hay nhiều sự kiện cho 1 phần tử HTML.

Ví dụ gắn sự kiện click cho thẻ p :

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

Ví dụ gắn nhiều sự kiện cho thẻ p :

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

Bài sau » « Bài trước
Back to top