Các sự kiện sinh ra để phản ứng lại với tương tác của người dùng với trang web. Chúng ta đã khá quen thuộc với các sự kiện như title, onmousedown, onkeydown,
…… trong javascript. Jquery tất nhiên cung cấp đầy đủ những sự kiện trong javascript. Không chỉ vậy, với cú pháp xử lý đơn giản, dễ hiểu nó còn làm được nhiều hơn thế.
$[document].ready[]
Đây là bộ quản lý sự kiện cơ bản của Jquery. Hiểu đơn giản thì nó cũng là một sự kiện trong jquery, được kích hoạt khi tài liệu html của trang web được load xong và cây DOM được tạo thành.
Ngoài ra, Jquery còn có một bộ quản lý sự kiện khác đó là $[window].load[]. Cái này hoàn toàn giống với window.onload[]
trong javascript.Window.onload[]
chỉ được kích hoạt khi toàn bộ tài liệu đã được load xong, bào gồm ảnh, css, object, các frame…. Rõ ràng
0 có ưu điểm rõ rệt hơn khi thời điểm kích hoạt sự kiện là sớm hơn, đặc biệt khi trang web có dung lượng lớn, chứa nhiều hình ảnh.
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
Tuy nhiên nếu bạn cần thao tác javascript với các hình ảnh thì sử dụng window.onload[]
là hợp lý.
Hàm
0 có thể được gọi nhiều lần, ngoài cách viết này chúng ta có thể viết
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
3 hoặc
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
4đều được.
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
Ví dụ minh họa
Hãy bắt đầu bằng một sự kiện đơn giản, đó là click:
Code html:
[html]click here[/html]
Code Jquery:
$[document].ready[ function [] {
$[‘#target’].click[function[ e ]{
$[“body”].append[“bạn đã click”];
}];
}];
Code trên sẽ hoạt động như sau: khi bạn
5 vào button có id là
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
6 thì một đoạn text sẽ được thêm vào cuối thẻ . Hàm
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
7 bên trong chính là
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
8, có nhiệm vụ xử lý sự kiện click của chúng ta.
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
Bạn có thể xem kết quả ở đây: //jsfiddle.net/Nbp4v/
Event Object
Quay lại với ví dụ ở phần minh họa trên, chúng ta thấy hàm
8 có một đối số
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
$[document].ready[ function[]{0 ở bên trong. Đó là Event Object, bạn có thể đặt một tên bất kỳ cho tham số sự kiện này. Ở đây nó không được sử dụng, tuy nhiên một số trường hợp lại cần thiết để lấy tọa độ con trỏ chuột hoặc ngăn hành vi mặc định của sự kiện,…..
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
Lấy một ví dụ:Code jquery:
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
Với code trên, khi ta click vào một vị trí bất kỳ trên trang thì một hộp thông báo tọa độ theo trục X và trục Y của con trỏ chuột hiện ra.
Tọa độ theo trục X hiểu là khoảng cách từ con trỏ chuột tới lề trái của trang, còn tọa độ theo trục Y là khoảng cách tới Top của trang.
$[document].ready[ function[]{1 là các thuộc tính của event object, ngoài ra còn có các thuộc tính và phương thức khác như:
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
$[document].ready[ function[]{2 tùy thuộc vào từng sự kiện cụ thể.
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
Chú ý:
Bạn cần phân biệt
$[document].ready[ function[]{3 với
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
$[document].ready[ function[]{4:
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
$[document].ready[ function[]{4 sẽ tính khoảng cách từ con trỏ chuột tới Top của cửa sổ trình duyệt còn
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
$[document].ready[ function[]{3sẽ lấy khoảng cách từ con trỏ chuột tới Top[vị trí trên cùng] của trang web. Sự khác biệt này thể hiện rõ khi trang web của bạn dài và khi cuộn xuống, rõ ràng là pageY sẽ lớn hơn clientY ở cùng vị trí chuột. Tương tự với
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
$[document].ready[ function[]{7 và
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
$[document].ready[ function[]{8
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
preventDefault[]
Đây là một phương thức của event Object ở trên. Nó không có tham số, dùng để ngăn chặn hành vi mặc định của sự kiện.
Ví dụ:
$[document].ready[ function[]{
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
$[document].ready[ function[]{9 là sự kiện khi ta click chuột phải trên trang web. Hành vi mặc định của trình duyệt là một menu sẽ hiện ra với lựa chọn như “tải lại”, “mở tab mới”,….. . Tuy nhiên khi sử dụng
$[window].contextmenu[ function[ e ]{
//code ở đây
e.preventDefault[];
}];
}];
0 thì không menu nào được hiện ra cả.
$[document].ready[ function [ e ]{
$["#first"].click[function[e] {
alert["first"];
}];
$["#second"].click[function[e] {
alert["second"];
}];
$["#third"].click[function[e] {
alert["third"];
e.stopPropagation[];
}];
}];
Hàm1 có tác dụng rõ rệt khi ta submit một form và ngăn nó không tự động chuyển trang.
$[document].ready[ function [ e ]{
$["#first"].click[function[e] {
alert["first"];
}];
$["#second"].click[function[e] {
alert["second"];
}];
$["#third"].click[function[e] {
alert["third"];
e.stopPropagation[];
}];
}];
Có thể sử dụng2 trong
$[document].ready[ function [ e ]{
$["#first"].click[function[e] {
alert["first"];
}];
$["#second"].click[function[e] {
alert["second"];
}];
$["#third"].click[function[e] {
alert["third"];
e.stopPropagation[];
}];
}];
8 để thay thế cho hàm
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
1. Chúng có tác dụng như nhau.
$[document].ready[ function [ e ]{
$["#first"].click[function[e] {
alert["first"];
}];
$["#second"].click[function[e] {
alert["second"];
}];
$["#third"].click[function[e] {
alert["third"];
e.stopPropagation[];
}];
}];
stopPropagation[]
Đây cũng là một hàm của event Object. Nó ngăn quá trình nổi bọt của sự kiện trong DOM.
Ví dụ khi gán một sự kiện cho một phần tử. Mặc định các phần tử con của phần tử đó cũng được gán sự kiện. Nhưng khi5 được gọi trong
$[document].ready[ function [ e ]{
$["#first"].click[function[e] {
alert["first"];
}];
$["#second"].click[function[e] {
alert["second"];
}];
$["#third"].click[function[e] {
alert["third"];
e.stopPropagation[];
}];
}];
8 của phần tử con thì nó không bị ảnh hưởng bởi sự kiện của phần tử cha, ông của nó.
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
Minh họa:
Code html:[html]
đoạn đầu
đoạn 2
đoạn 3
[/html]Code jquery:
$[document].ready[ function [ e ]{
$["#first"].click[function[e] {
alert["first"];
}];
$["#second"].click[function[e] {
alert["second"];
}];
$["#third"].click[function[e] {
alert["third"];
e.stopPropagation[];
}];
}];
Kết quả: //jsfiddle.net/Z6kEN/
Chú ý là hàm này chỉ ngăn chặn được hành vi của sự kiện từ phần tử cha, còn các sự kiện khác trong phần tử đó đang chạy vẫn kích hoạt như thường.
Câu lệnh return false cũng có tác dụng như
5
$[document].ready[ function [ e ]{
$["#first"].click[function[e] {
alert["first"];
}];
$["#second"].click[function[e] {
alert["second"];
}];
$["#third"].click[function[e] {
alert["third"];
e.stopPropagation[];
}];
}];
Ràng buộc các sự kiện
Đôi khi bạn muốn gắn một xử lý cho nhiều sự kiện khác nhau của một phần tử hoặc gắn xử lý đó cho một sự kiện của nhiều phần tử khác nhau thì làm thế nào? Cách đơn giản là bạn tách biệt chúng ra từng Handler riêng biệt. Tuy nhiên nó không thật thân thiện lắm, Jquery cung cấp các hàm để làm điều đó tốt hơn gọi là
8. Một số hàm phổ biến như
$[document].ready[ function [ e ]{
$["#first"].click[function[e] {
alert["first"];
}];
$["#second"].click[function[e] {
alert["second"];
}];
$["#third"].click[function[e] {
alert["third"];
e.stopPropagation[];
}];
}];
9.
$[document].ready[ function [ e ]{
$["#first"].click[function[e] {
alert["first"];
}];
$["#second"].click[function[e] {
alert["second"];
}];
$["#third"].click[function[e] {
alert["third"];
e.stopPropagation[];
}];
}];
Ví dụ với bind[]:
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
Code trên xử lý 2 sự kiện
0 và
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
5 cùng trong một ràng buộc.
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
Hàm
2 tương thích khá tốt trên các trình duyệt tuy nhiên nhược điểm của nó là
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
8 chỉ có tác dụng với các selector hiện tại trong DOM, các phần tử được thêm vào khớp với selector không bị ảnh hưởng. Hàm
$[document].click[ function [ e ]{
alert [ “pageX is: “+ e.pageX + “pageY is: “ + e.pageY];
}];
4 và
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
5 giúp ta giải quyết điều đó.
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
Ví dụ với
5:
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
[html]
- comment 1
danh sách comment
[/html]
Code jquery:
$["#comment-list"].on["click",".comment", function[ e ]{
$[this].append["
e.stopPropagation[];
}];
Xem kết quả: //jsfiddle.net/4cuc5/
Với ví dụ trên vì phần tử lắng nghe sự kiện –
7 chính là
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
8các nên thành phần
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
9 được thêm vào vẫn kích hoạt được sự kiện. Điều này sẽ hoàn toàn khác nếu chúng ta dùng
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
$["#comment-list"].on["click",".comment", function[ e ]{
$[this].append["
e.stopPropagation[];
}];
0.. vì khi đó
7 là các class
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
9. Đây là một kỹ thuật được sử dụng nhiều trong AJAX khi mà trang web không load lại khi có phần tử mới thêm vào tài liệu.
$ [ "# my-id" ] .bind [{
click: function [] {
/ / code ở đây
},
mouseup: function [] {
/ / code ở đây
}
}];
Tùy biến sự kiện
Ngoài các sự kiện có sẵn của Jquery, nếu chúng vẫn chưa làm bạn hài lòng, bạn hoàn toàn có thể tạo một sự kiện riêng theo ý mình. Cách làm cũng thật đơn giản.
Đầu tiên định nghĩa một sự kiện mới cho phần tử nào đấy – ví dụ:
$ [ "# myid" ]. on [ "mycustom" , function [ event, param1, param2 ] {
alert [param1 + " n" + param2];
}];
Sau đó cũng phần tử đó , kích hoạt sự kiện vừa tạo bằng hàm
$["#comment-list"].on["click",".comment", function[ e ]{
$[this].append["
e.stopPropagation[];
}];
3 như những sự kiện bình thường khác:
$["#comment-list"].on["click",".comment", function[ e ]{
$[this].append["
e.stopPropagation[];
}];
4
Tất nhiên là trên thực tế bạn cũng nên dùng một sự kiện sẵn có để kích hoạt sự kiện mới nào đó.
Một số loại sự kiện hay gặp
- Sự kiện chuột:
$["#comment-list"].on["click",".comment", function[ e ]{
$[this].append[" - comment "];
- Sự kiện Form:
$["#comment-list"].on["click",".comment", function[ e ]{
$[this].append[" - comment "];
- Sự kiện bàn phím: là các sự kiện xảy ra khi ta nhấn một phím hay tổ hợp phím nào đó:
$["#comment-list"].on["click",".comment", function[ e ]{
$[this].append[" - comment "];
- Sự kiện trình duyệt: được kích hoạt khi ta tương tác với cửa sổ trình duyệt như
$["#comment-list"].on["click",".comment", function[ e ]{
$[this].append[" - comment "];
e.stopPropagation[];
}];
5…
e.stopPropagation[];
}];
6
e.stopPropagation[];
}];
7
e.stopPropagation[];
}];
8– cuộn trang, hay
$["#comment-list"].on["click",".comment", function[ e ]{
$[this].append["
e.stopPropagation[];
}];
9 – kích thước cửa sổ thay đổi.
Lời kết
Trong phần này mình đã nói qua rất đầy đủ về Sự kiện [Event] trong jQuery và đó cũng là mấu chốt chìa khóa nếu bạn muốn tùy biến jQuery để thực hiện các công việc tạo hiệu ứng như ý muốn, kể cả nó không khó để sử dụng.