xu ly su kien trong jquery

http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Xử lý kiện jQuery Chúng ta có khả tạo trang web động sử dụng Sự kiện (Event) Các kiện hành động mà phát ứng dụng web bạn Sau ví dụ số kiện: • Nhấp chuột • Tải trang web • Di chuyển chuột qua phần tử • Đệ trình HTML Form • Thao tác nhấn phím bàn phím • etc Khi kiện kích hoạt, bạn sử dụng hàm custom để phản hồi bạn muốn với kiện Những hàm custom gọi Event Handler Bind Event Handler jQuery Sử dụng Event Model jQuery, thiết lập Event Handler phần tử DOM với phương thức bind() sau: The jQuery Example $(document).ready(function() { $('div').bind('click', function( event ){ alert('Hi there!'); }); }); div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} style="background-color:green;">TWO THREE Code làm cho phần tử div phản hồi lại kiện click; người sử dụng nhấp chuột bên phần tử div này, sau đó, thơng báo hiển thị Nó cho kết sau: Click on any square below to see the result: ONE http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     TWO THREE Cú pháp đầy đủ lệnh bind() jQuery sau: selector.bind( eventType[, eventData], handler) Tiếp theo, diễn tả chi tiết tham số: • eventType − Một chuỗi chứa loại JavaScript event, click đệ trình Bạn theo dõi phần để thấy danh sách đầy đủ loại kiện • eventData − tham số tùy ý map liệu mà truyền tới Event Handler • handler − Một hàm để thực thi kiện kích hoạt Gỡ bỏ Event Handler jQuery Một nét đặc trưng là, Event Handler thành lập, hiệu phần sống lại trang web Có cần thiết bạn muốn gỡ bỏ Event Handler jQuery cung cấp lệnh unbind() để gỡ bỏ Event Handler tồn Cú pháp unbind() jQuery sau: selector.unbind(eventType, handler) or selector.unbind(eventType) Chi tiết tham số: • eventType − Một chuỗi chứa loại JavaScript Event, click đệ trình Bạn theo dõi phần để thấy danh sách đầy đủ loại kiện • handler − Nếu cung cấp, nhận diện Event Handler cụ thể cần gỡ bỏ Các loại kiện jQuery Bạn kết nối (bind) kiện sau sử dụng jQuery: STT Loại Event & Miêu tả http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     blur Xuất phần tử trọng tâm change Xuất phần tử thay đổi click Xuất click chuột dblclick Kích hoạt nhấp đúp chuột error Xuất có lỗi q trình tải focus Xuất phần tử nhận trọng tâm keydown Xuất phím nhấn keypress Kích hoạt phím nhấn thả keyup Kích hoạt phím thả 10 load Xuất tài liệu tải 11 mousedown Xuất nút chuột nhấn 12 mouseenter http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Xuất chuột di chuyển vào khu vực phần tử 13 mouseleave Xuất chuột di chuyển khỏi khu vực phần tử 14 mousemove Kích hoạt trỏ chuột di chuyển 15 mouseout Kích hoạt trỏ chuột di chuyển khỏi phần tử 16 mouseover Kích hoạt trỏ chuột di chuyển qua phần tử 17 mouseup Xuất nút chuột nhả 18 resize Kích hoạt kích cỡ cửa sổ thay đổi 19 scroll Kích hoạt cửa sổ 20 select Kích hoạt text chọn 21 submit Kích hoạt form đệ trình 22 unload Kích hoạt tài liệu khơng tải http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Đối tượng Event jQuery Hàm callback nhận tham số đơn; Handler gọi, đối tượng JavaScript Event truyền qua Đối tượng Event thường khơng cần thiết tham số bỏ qua, context thường có sẵn Handler kết nối để biết xác cần thực Handler kích hoạt; nhiên có số thuộc tính mà bạn cần truy xuất Các thuộc tính đối tượng Event jQuery Các thuộc tính Event có sẵn an toàn để truy cập theo phương thức độc lập: STT Thuộc tính & Miêu tả altKey Thiết lập true phím Alt nhấn kiện kích hoạt, khơng false Phím Alt gán nhãn Option hầu hết bàn phím Mac ctrlKey Thiết lập true phím Ctrl nhấn kiện kích hoạt, không false data Giá trị, bất kỳ, truyền tham số thứ hai tới lệnh bind() Handler thành lập keyCode Cho kiện phím di chuyển lên, xuống, điều trả phím mà nhấn metaKey Thiết lập true phím Meta nhấn kiện kích hoạt, khơng false Phím Meta phím Ctrl PC phím Command Macs pageX Cho kiện liên quan tới chuột, xác định tọa độ ngang kiện http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     quan hệ với trang ban đầu pageY Cho kiện liên quan tới chuột, xác định tọa độ dọc kiện quan hệ với trang ban đầu relatedTarget Với số kiện liên quan đến chuột, nhận diện phần tử mà trỏ chuột rời khỏi vào kiện kích hoạt screenX Với số kiện liên quan đến chuột, xác định tọa độ ngang kiện mối quan hệ với hình ban đầu 10 screenY Với số kiện liên quan đến chuột, xác định tọa độ dọc kiện mối quan hệ với hình ban đầu 11 shiftKey Thiết lập true phím Shift nhấn kiện kích hoạt, không false 12 target Nhận diện phần tử mà với kiện kích hoạt 13 timeStamp timestamp (giá trị mili giây) kiện tạo 14 type Với tất kiện, xác định loại kiện mà kích hoạt 15 which Với kiện liên quan tới bàn phím, xác định code giá trị số cho phím mà gây kiện, với kiện liên quan tới chuột, xác định nút nhấn (1 cho nút http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     trái, cho cho nút phải) Ví dụ The jQuery Example $(document).ready(function() { $('div').bind('click', function( event ){ alert('Event type is ' + event.type); alert('pageX : ' + event.pageX); alert('pageY : ' + event.pageY); alert('Target : ' + event.target.innerHTML); }); }); div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} style="background-color:green;">TWO THREE Nó cho kết sau: Các phương thức đối tượng Event jQuery Dưới liệt kê phương thức mà gọi đối tượng Event jQuery: STT Phương thức & Miêu tả preventDefault() Ngăn cản trình duyệt thực thi hành động mặc định isDefaultPrevented() Trả có hay không phương thức event.preventDefault() gọi đối tượng Event stopPropagation() Dừng bubble kiện tới phần tử cha, ngăn cản phần tử cha thông báo kiện isPropagationStopped() Trả có hay khơng event.stopPropagation() gọi đối tượng Event http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     stopImmediatePropagation() Dừng phần lại Handler từ việc thực thi isImmediatePropagationStopped() Trả có hay khơng event.stopImmediatePropagation() gọi đối tượng Event Các phương thức thao tác đối tượng Event jQuery Bảng liệt kê phương thức quan trọng liên quan tới Event jQuery: STT Phương thức & Miêu tả bind( type, [data], fn ) Bind Handler tới nhiều kiện cho phần tử so khớp Có thể bind kiện Custom off( events [, selector ] [, handler(eventObject) ] ) Nó gỡ bỏ kiện sống bind hover( over, out ) Bắt chước việc hover cho di chuyển ví dụ chuột rời khỏi đối tượng on( events [, selector ] [, data ], handler ) Bind Handler tới kiện cho tất phần tử tại, tương lai, kết nối Có thể bind kiện custom one( type, [data], fn ) Bind Handler tới nhiều kiện để thực thi lần cho phần tử so khớp ready( fn ) Bind hàm để thực thi DOM sẵn sàng để thao tác http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     trigger( event, [data] ) Kích hoạt kiện phần tử so khớp triggerHandler( event, [data] ) Kích hoạt tất Event Handler bind phần tử unbind( [type], [fn] ) Thực ngược lại với bind, gỡ bỏ đối tượng bind từ phần tử so khớp Các phương thức Event Helper jQuery jQuery cung cấp tập hợp hàm Event Helper mà sử dụng để kích hoạt kiện để bind loại kiện đề cập phần Các phương thức Trigger jQuery Dưới ví dụ kích hoạt kiện blur tất đoạn văn: $("p").blur(); Phương thức Binding jQuery Ví dụ sau bind kiện click tất phần tử trong Thư viện C: $("div").click( function () { // something here }); Bảng liệt kê đầy đủ tất phương thức hỗ trợ jQuery: STT Phương thức & Miêu tả blur( ) Kích hoạt kiện blur phần tử so khớp blur( fn ) Bind hàm tới kiện blur phần tử so khớp change( ) http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Kích hoạt kiện change phần tử so khớp change( fn ) Bind hàm tới kiện change phần tử so khớp click( ) Kích hoạt kiện click phần tử so khớp click( fn ) Bind hàm tới kiện click phần tử so khớp dblclick( ) Kích hoạt kiện dblclick phần tử so khớp dblclick( fn ) Bind hàm tới kiện dblclick phần tử so khớp error( ) Kích hoạt kiện error phần tử so khớp 10 error( fn ) Bind hàm tới kiện error phần tử so khớp 11 focus( ) Kích hoạt kiện focus phần tử so khớp 12 focus( fn ) Bind hàm tới kiện focus phần tử so khớp 13 keydown( ) Kích hoạt kiện keydown phần tử so khớp 14 keydown( fn ) http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Bind hàm tới kiện keydown phần tử so khớp 15 keypress( ) Kích hoạt kiện keypress phần tử so khớp 16 keypress( fn ) Bind hàm tới kiện keypress phần tử so khớp 17 keyup( ) Kích hoạt kiện keyup phần tử so khớp 18 keyup( fn ) Bind hàm tới kiện keyup phần tử so khớp 20 load( fn ) Bind hàm tới kiện load phần tử so khớp 21 mousedown( fn ) Bind hàm tới kiện mousedown phần tử so khớp 22 mouseenter( fn ) Bind hàm tới kiện mouseenter phần tử so khớp 23 mouseleave( fn ) Bind hàm tới kiện mouseleave phần tử so khớp 24 mousemove( fn ) Bind hàm tới kiện mouseover phần tử so khớp 25 mouseout( fn ) Bind hàm tới kiện mouseout phần tử so khớp 26 mouseover( fn ) http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Bind hàm tới kiện mouseover phần tử so khớp 27 mouseup( fn ) Bind hàm tới kiện mouseup phần tử so khớp 28 resize( fn ) Bind hàm tới kiện resize phần tử so khớp 29 scroll( fn ) Bind hàm tới kiện scroll phần tử so khớp 30 select( ) Kích hoạt kiện select phần tử so khớp 31 select( fn ) Bind hàm tới kiện select phần tử so khớp 32 submit( ) Kích hoạt kiện submit phần tử so khớp 33 submit( fn ) Bind hàm tới kiện submit phần tử so khớp 34 unload( fn ) Bind hàm tới kiện unload phần tử so khớp   http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     ... phần tử trọng tâm change Xu t phần tử thay đổi click Xu t click chuột dblclick Kích hoạt nhấp đúp chuột error Xu t có lỗi trình tải focus Xu t phần tử nhận trọng tâm keydown Xu t phím nhấn keypress... select( fn ) Bind hàm tới kiện select phần tử so khớp 32 submit( ) Kích hoạt kiện submit phần tử so khớp 33 submit( fn ) Bind hàm tới kiện submit phần tử so khớp 34 unload( fn ) Bind hàm tới kiện... khớp Các phương thức Event Helper jQuery jQuery cung cấp tập hợp hàm Event Helper mà sử dụng để kích hoạt kiện để bind loại kiện đề cập phần Các phương thức Trigger jQuery Dưới ví dụ kích hoạt kiện