Header Ads

test

Jquery căn bản: Jquery Events

tháng 4 05, 2014 , , , ,
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ư onclick, 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$(document).ready() 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.
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 $(document).ready() có thể được gọi nhiều lần, ngoài cách viết này chúng ta có thể viết $().ready(function(){……….}) hoặc $(function(){……..}) đều được.

Ví dụ minh họa

Hãy bắt đầu bằng một sự kiện đơn giản, đó là click:
Code html:
1
<button id="”target”">click here</button>
Code Jquery:
1
2
3
4
5
$(document).ready( function () {
   $('#target').click(function( e ){
      $(“body”).append(“bạn đã click”);
   });
});
Code trên sẽ hoạt động như sau: khi bạn click vào button có id là target thì một đoạn text sẽ được thêm vào cuối thẻ <body>. Hàm function() bên trong chính là eventHandler, có nhiệm vụ xử lý sự kiện click của chúng ta.
Bạn có thể xem kết quả ở đây: http://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 eventHandler có một đối số eở 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,…..
Lấy một ví dụ:
Code jquery:
1
2
3
$(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.
pageX, pageY 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ư: type, target, clientX, clientY, timestamp, preventDefault(), stopPropagation(),…… tùy thuộc vào từng sự kiện cụ thể.
Chú ý:
Bạn cần phân biệt pageY với clientY: clientY 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 pageY sẽ 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 pageX vàclientX.
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ụ:
1
2
3
4
5
6
<pre>$(document).ready( function(){
   $(window).contextmenu( function( e ){
          //code ở đây
          e.preventDefault();
   });
});
Contextmenu() 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 e.preventDefault() thì không menu nào được hiện ra cả.
Hàm preventDefault() 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.
Có thể sử dụng return false trong eventHandler để thay thế cho hàm preventDefault(). Chúng có tác dụng như nhau.
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 khi e.stopPropagation() được gọi trong eventHandler 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ó.
Minh họa:
Code html:
1
2
3
4
5
<div id="first"><p>đoạn đầu</p>
    <div id="second"><p>đoạn 2</p>
        <p id="third">đoạn 3</p>
    </div>
</div>
Code jquery:
01
02
03
04
05
06
07
08
09
10
11
12
$(document).ready( function ( e ){
   $("#first").click(function(e) {
        alert("first");
   });
   $("#second").click(function(e) {
        alert("second");
   });
   $("#third").click(function(e) {
       alert("third");
       e.stopPropagation();
   });
});
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ư 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à Event Handler Attachment. Một số hàm phổ biến như bind(), delegate(), on(), one(),…..
Ví dụ với bind():
1
2
3
4
5
6
7
8
$ ( "# my-id" ) .bind ({
  click: function () {
    / / code ở đây
  },
  mouseup: function () {
    / / code ở đây
  }
});
Code trên xử lý 2 sự kiện mouseup và click cùng trong một ràng buộc.
Hàm bind() 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àeventHandler 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 delegate() và on() giúp ta giải quyết điều đó.
Ví dụ với on():
1
2
3
<ul id="comment-list">
        danh sách comment
        <li class="comment">comment 1</li></ul>
Code jquery:
1
2
3
4
$("#comment-list").on("click",".comment", function( e ){
    $(this).append("<li class='comment'>comment</li>");
    e.stopPropagation();
});
Xem kết quả: http://jsfiddle.net/4cuc5/
Với ví dụ trên vì phần tử lắng nghe sự kiện – listener chính là #comment-list các nên thành phần .comment đượ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 $(“#comment-list .comment”).on(“click”, function(){……}).. vì khi đó listener là các class .comment. Đâ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.

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ụ:
1
2
3
4
5
$ ( "# 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 trigger() như những sự kiện bình thường khác:
$( "#myid" ).trigger( "mycustom" );
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: click(), hover(), mouseout(), mousedown(), mouseup(), mouseover()……
  • Sự kiện Form: blur(), focus(), change(), submit(), select(),….
  • 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 đó: keydown((), keyup(), keypress(),…..
  • 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ưscroll()- cuộn trang, hay resize() – 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.

Post a Comment

Không có nhận xét nào

Đăng ký: Đăng Nhận xét ( Atom )