jQuery cho phép đáp ứng các sự kiện trong trang HTML.
Sự kiện là gì?
Tất cả những hành động khác nhau trên trang web mà có thể đáp ứng, đượ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 một cái gì đó xảy ra .
Ví dụ:
- di chuyển chuột qua một thành phần;
- lựa chọn một radio button;
- click vào một thành phần;
Thuật ngữ “fires” thường được sử dụng với các sự kiện (event). Ví du: “sự kiện nhấn phím “fires” thời điểm bạn nhấn một phím”.
Dưới đây là một số sự kiện DOM phổ biến:
| Chuột | Bàn phím | Form | Tài liệu/Cửa sổ |
|---|---|---|---|
| click (nháy đơn) | nhấn phím | gửi | tải |
| nháy kép | phím xuống | thay đổi | thay đổi kích cỡ |
| di chuyển vào | phím lên | focus | scroll |
| di chuyển ra | blur | unload |
Cú pháp cho phương thức sự kiện trong jQuery
Trong jQuery, hầu hết sự kiện DOM có một phương thức tương đương jQuery. Để gán một sự kiện click vào tất cả các đoạn văn trên một trang, bạn có thể làm như sau:
$("p").click();Bước tiếp theo là xác định những gì sẽ xảy ra khi sự kiện diễn ra. Bạn phải viết một hàm cho sự kiện:
$("p").click(function(){
// viết mã ở đây
});Những phương thức sự kiện phổ biến trong jQuery
$(document).ready()
Phương thức $(document).ready() cho phép chúng ta thực hiện hàm khi tài liệu được tải xong hoàn toàn. Sự kiện này sẽ được giải thích ở bài cú pháp trong jQuery.
click()
Phương thức click gắn một hàm xử lý sự kiện cho phần tử HTML.
Hàm này thực thi khi người dùng click vào phần tử HTML.
Ví dụ dưới đây nói rằng: Khi một click xảy ra trên thẻ <p> nào đó; ẩn thẻ <p> ấy:
Ví dụ:
$("p").click(function(){
$(this).hide();
});dblclick()
Phương thức dbclick() gắn một hàm xử lý sự kiện cho phần tử HTML.
Hàm này thực thi khi người click đúp vào một thành phần HTML:
Ví dụ:
$("p").dblclick(function(){
$(this).hide();
});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 này sẽ thực thi khi con trỏ chuột được đưa vào khu vực của phần tử HTML được chọn:
Ví dụ:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});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 được đưa ra khỏi phần tử HTML được chọn.
Ví dụ:
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});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 con trỏ trái chuột được nhấn trong khi chuột di chuyển qua phẩn từ HTML đó. (cá nhân mình thấy nó rất giống hàm click)
Ví dụ:
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});mouseup()
Phương thức mouseup() gắn một hàm xử lý sự kiện vào phần tử HTML.
Hàm được thực thi khi, chuột trái được nhả trong khi chuột di chuyển qua phần tử HTML:
Ví dụ:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});hover()
Phương thức hover()có hai chức năng và là sự kết hợp của hai hàm mouseenter() và mouseleave().
Hàm đầu tiên được thực thi khi chuột di chuyển vào thành phần HTML, và hàm thứ hai được thực thi khi chuột di chuyển ra ngoài thành phần HTML:
Ví dụ:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});focus()
Phương thức focus() gắn một hàm xử lý sự kiện vào các trường trong form HTML.
Hàm này được thực thi khi trường trong form được “focus”:
Ví dụ:
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});blur()
Phương thức blur() gắn một hàm xử lý sự kiện vào các trường trong form HTML.
Hàm này được thực thi khi trường trong form mất focus.
Ví dụ:
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});focus() và blur() xử lý hai sự kiện trái ngược nhau.
Comments are closed.