JQuery Events – Cơ Bản Về Sự Kiện Trong JQuery | Quyetdo289's Blog

Trang chủ » Các Sự Kiện Của Jquery » JQuery Events – Cơ Bản Về Sự Kiện Trong JQuery | Quyetdo289's Blog

Có thể bạn quan tâm

Các phương thức sự kiện trong jQuery được dùng để đăng ký các hành vi thực hiện các tác động khi người dùng tương tác với trình duyệt, và sau đó điều khiển các hành vi đã đăng ký này.

jQuery cung cấp cho chúng ta khá nhiều các sự kiện đủ để thao tác với các thành phần trên website mà chúng ta muốn. Bên cạnh đó, jQuery còn loại bỏ hoàn toàn các event code ra khỏi cách viết javascript thông thường.

Ví dụ để xuất hiện thông báo khi người dùng click vào 1 liên kết :

Code javascript :

<a href="#" onclick="arlert(‘Hello world')">Click to show message</a>

Code jQuery :

$("a.click").click(function() { alert (‘Hello world');

Dễ dàng nhận thấy là khi sử dụng javascript để gọi sự kiện onclick ngay trong liên kết <a>, nhưng với jQuery ta có thể tách biệt phần code HTML và code hành vi.

Bộ quản lý sự kiện

Javascript cung cấp bộ quản lý sự kiện window.onload cho phép chúng ta thực thi một hàm nào đó. Trong khi đó jQuery cung cấp bộ quản lý sự kiện $(document).ready() với những ưu điểm vượt trội hơn window.onload.

Thực tế thì hai cách này đều có tác dụng giống nhau, nhưng chúng lại kích hoạt tác vụ tại những thời điểm hơi khác nhau :

  • window.onload được kích hoạt khi mà trình duyệt đã hoàn toàn load xong tài liệu. Điều này có nghĩa rằng mọi phần tử trên trang đã sẵn sàng để được thao tác bởi javascript. Đây chính là một điểm thuận lợi để chúng ta viết code mà không phải lo lắng về trật tự load.
  • $(document).ready() được kích hoạt khi DOM hoàn toàn sẵn sàng để sử dụng. Điều này cũng có nghĩa rằng mọi thành phần có thể được truy cập bởi code của chúng ta mặc dù không nhất thiết tất cả các tài liệu liên quan ( stylesheet, hình ảnh, … ) đã được tải xong. Ngay sau khi HTML được download và chuyển qua cây DOM, code có thể được thực thi.

Lưu ý : Để đảm bảo trang web vẫn có định dạng trước khi code javascript được thực hiện, người ta thường đặt <link rel =”stylesheet”> đằng trước thể <script> trong phần <head> của tài liệu HTML.

Sự khác biệt giữa window.onload và $(document).ready() trở nên rõ ràng trong trường hợp chúng ta cần tải 1 trang có dung lượng lớn ( ví dụ 1 trang thư viện hình ảnh, bao gồm nhiều hình có dung lượng lớn ).

Cách đăng ký bộ quản lý sự kiện trong jQuery : 

$(document).ready(function(){ // viết code ở đây })

Hoặc :

$().ready(function(){ // viết code ở đây })

Hoặc :

$ (function(){ // viết code ở đây })

Gắn kết Event Handler (Event Handler Attachment) sử dụng phương thức .bind()

Trong một trang web, trình duyệt sẽ quản lý cách thức hiển thị của trang tương ứng với mã HTML và CSS. Phần mã kịch bản chúng ta thêm vào trang sẽ định nghĩa các hành vi của giao diện đó. Các mã kịch bản này là dạng event handler, hay còn được gọi là các listener. Chúng có nhiệm vụ lắng nghe và đáp ứng lại các sự kiện khác nhau trong suốt quá trình trang được hiển thị. Các sự kiện này có thể được sinh ra bởi hệ thống nhưng hầu hết chúng thường là kết quả của các thao tác từ người dùng ( như di chuyển hay nhấn chuột, gõ phím … ).

jQuery cung cấp cho ta nhiều phương thức để có thể gắn kết các event handler cho các thành phần trên trang, phổ biến nhất là sử dụng phương thức .bind().

Phương thức .bind() :

Tác dụng : Gắn một handler vào sự kiện của phần tử

Các dạng sử dụng .bind() :

  • .bind(eventType[,eventData],handler(eventObject))
    • Tham số :
      • eventType: là một chuỗi chứa một hoặc nhiều loại sự kiện DOM như “click”, “submit”, …
      • eventData: (Tùy chọn) Danh sách dữ liệu sẽ được truyền cho event handler
      • handler(eventObject): Hàm được thực thi mỗi khi sự kiện xảy ra.
    • Phiên bản được thêm vào : 1.0
  • .bind(eventType[,eventData],preventBubble)
    • Tham số :
      • preventBubble : Mặc định = true. Nếu = false sẽ gắn kết một function ngăn chặn hành động mặc định khi xảy ra và ngăn chặn sự kiện bong bóng.
    • Phiên bản được thêm vào : 1.4.3
  • .bind(events)
    • Tham số events là một sơ đồ của một hoặc nhiều kiểu sự kiện DOM và các hàm thực thi chúng.
    • Phiên bản được thêm vào : 1.4

Giá trị trả về : .bind() trả về một đối tượng jQuery, dùng cho mục đích sử dụng liên tục các phương thức theo kiểu mắt xích.

Phương thức .bind() là cách thức chủ yếu để gắn kết các hành vi vào tài liệu. Tất cả các sự kiện javascript được chấp nhận cho tham số eventType bao gồm :

  • blur
  • change
  • click
  • dbclick
  • error
  • focus
  • keydown
  • keypress
  • keyup
  • load
  • mousedown
  • mousemove
  • mouseout
  • mouseup resize
  • scroll
  • select
  • submit
  • unload

jQuery cung cấp các phương thức tắt để gắn kết mỗi loại sự kiện trên, nó hoạt động giống như khi sử dụng .bind() nhưng viết ngắn hơn được vài chữ. Ví dụ bạn có thể viết .click() thay cho .bind(‘click’)

Khi sự kiện xảy ra trên một phần tử, tất cả handler đã gắn cho kiểu sự kiện của phần tử sẽ được kích hoạt. Nếu có nhiều handler được đăng ký, chúng sẽ được thực thi theo thứ tự khi chúng được gắn vào.

Ví dụ sau sẽ gắn kết sự kiện click vào cho phần tử có ID là foo : khi người dùng click vào #foo, thông báo “Hello click” sẽ hiện ra.

$('#foo').bind('click', function() { alert('Hello click'); });

Gắn kết nhiều sự kiện : 

Nhiều loại sự kiện có thể được gắn kết đồng thời cho một phần tử bằng cách ngăn cách nhau bởi khoảng trắng.

Ví dụ sau sẽ gắn kết sự kiện cho phần tử #foo :

  • thêm thuộc tính class = “entered” khi mouse enters
  • bỏ thuộc tính class khi mouse leaves.
$('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); });

Đối với phiên bản jQuery 1.4, chúng ta có thể gắn kết nhiều event handler đồng thời bằng cách truyền vào một sơ đồ của một cặp event type/handlers :

$('#foo').bind({ click: function() { // do something on click }, mouseenter: function() { // do something on mouseenter } });

Event Handlers 

Tham số handler mang một hàm hồi quy. Bên trong handler, từ khóa this chỉ đến phần tử DOM mà hander đó tác động. Để sử dụng phần tử trong jQuery, nó có thể được truyền vào hàm $() như bình thường.

Ví dụ :

$('#foo').bind('click', function() { alert($(this).text()); });

Sau khi đoạn code trên được thực thi, khi người dùng click vào phần tử có ID là foo, nội dung text của nó sẽ được hiện lên trong thông báo

Truyền dữ liệu cho sự kiện (Passing Event Data)

Tham số tùy chọn eventData thường không được sử dụng. Khi xuất hiện, nó cho phép chúng ta có thể truyền thêm thông tin cho handler.

Một sự tiện lợi của việc sử dụng tham số này là nó có thể khắc phục vấn đề sự đóng kín handler.

Xét ví dụ sau :

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var message = 'Hello foo!'; $('#foo').bind('click', function () { alert(message); }); message = 'Hello bar!'; $('#bar').bind('click', function () { alert(message); }); }); </script> </head> <body> <div id="foo">foo</div> <div id="bar">bar</div> </body> </html>

Khi bạn click vào foo hay bar thì đều hiện lên thông báo ‘Hello bar’. Bởi vì các handler có tính đóng gói, giá trị của message đã thay đổi trước khi được gọi trong handler. Để giải quyết điều này, chúng ta có thể truyền message bằng cách sử dụng eventData như sau :

var message = 'Hello foo!'; $('#foo').bind('click', { msg: message }, function (event) { alert(event.data.msg); }); message = 'Hello bar!'; $('#bar').bind('click', { msg: message }, function (event) { alert(event.data.msg); });

Trong trường hợp này, biến message không được chỉ đến trực tiếp bên trong các handler, thay vào đó, nó được truyền bởi giá trị (value) thông qua eventData, cái mà được ấn định giá trị tại thời điểm sự kiện xảy ra. Bây giờ,handler đầu tiên sẽ hiển thị “Hello foo!” , còn handler thứ hai sẽ hiển thị “Hello bar!”

Nếu eventData có mặt, nó sẽ là tham số thứ hai của phương thức .bind(); Nếu không thì hàm hồi quy được truyền vào như là tham số thứ hai và cuối cùng.

Một số ví dụ sử dụng phương thức .bind():

Ví dụ 1 : Xử lý sự kiện click và double click vào một đoạn văn.

Chú ý : thứ tự phản ứng sự kiện có thể khác nhau giữa các trình duyệt trong việc nhận 2 sự kiện click và 1 sự kiện dbclick. Độ nhạy của double click ( được tính bằng khoảng thời gian lớn nhất giữa các lần click chuột mà được phát hiện là một lần double click ) có thể khác nhau giữa các hệ thống hay trình duyệt và phụ thuộc vào cấu hình của người dùng.

<!DOCTYPE html> <html> <head> <style> p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } p.over { background: #ccc; } span { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>Click or double click here.</p> <span></span> <script> $("p").bind("click", function(event){ var str = "( " + event.pageX + ", " + event.pageY + " )"; $("span").text("Click happened! " + str); }); $("p").bind("dblclick", function(){ $("span").text("Double-click happened in " + this.nodeName); }); $("p").bind("mouseenter mouseleave", function(event){ $(this).toggleClass("over"); }); </script> </body> </html>

Ví dụ 2 : Hiển thị thông báo nội dung text của mỗi đoạn văn khi được click vào.

<!DOCTYPE html> <html> <head> <style> p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function () { $("p").bind("click", function () { alert($(this).text()); }); }); </script> </head> <body> <p>Ha Noi la thu do nuoc Viet Nam dan chu cong hoa</p> <p>Hai Phong thanh pho hoa phuong do</p> <p>Nghe An que huong Bac Ho</p> </body> </html>

Ví dụ 3: Truyền thêm thông tin trước khi sự kiện xảy ra.

function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)

Ví dụ 4: Thoát một hành động mặc định và ngăn chặn sự kiện bong bóng bằng cách return false

$("form").bind("submit", function() { return false; })

Ví dụ 5:  Chỉ thoát hành động mặc định bằng cách sử dụng phương thức .preventDefault()

$("form").bind("submit", function(event) { event.preventDefault(); });

Ví dụ 6: Ngăn chặn sự kiện bong bóng mà không chặn hành động mặc định bằng cách sử dụng phương thức .stopPropagation()

$("form").bind("submit", function(event) { event.stopPropagation(); });

Ví dụ 7: Gắn kết một sự kiện tùy chỉnh

<!DOCTYPE html> <html> <head> <style> p { color:red; } span { color:blue; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>Has an attached custom event.</p> <button>Trigger custom event</button> <span style="display:none;"></span> <script> $("p").bind("myCustomEvent", function(e, myName, myValue){ $(this).text(myName + ", hi there!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000); }); $("button").click(function () { $("p").trigger("myCustomEvent", [ "John" ]); }); </script> </body> </html>

Ví dụ 8: Gắn kết nhiều sự kiện đồng thời

$("div.test").bind({ click: function(){ $(this).addClass("active"); }, mouseenter: function(){ $(this).addClass("inside"); }, mouseleave: function(){ $(this).removeClass("inside"); } });

Share this:

  • Facebook
  • X
Like Loading...

Related

Từ khóa » Các Sự Kiện Của Jquery