Hướng dẫn dùng evvent JavaScript
|
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ư Show $(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 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. Tuy nhiên nếu bạn cần thao tác javascript với các hình ảnh thì sử dụng 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 3 hoặc 4đều được. Ví dụ minh họaHãy bắt đầu bằng một sự kiện đơn giản, đó là click: Code html: [html][/html] Code Jquery:
Code trên sẽ hoạt động như sau: khi bạn 5 vào button có id là 6 thì một đoạn text sẽ được thêm vào cuối thẻ . Hàm 7 bên trong chính là 8, 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 ObjectQuay 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ố
[/html] Code jquery:
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 – 7 chính là 8các nên thành phần 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
e.stopPropagation(); }); 0.. vì khi đó 7 là các class 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. Tùy biến sự kiệnNgoà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ụ:
Sau đó cũng phần tử đó , kích hoạt sự kiện vừa tạo bằng hàm
e.stopPropagation(); }); 3 như những sự kiện bình thường khác:
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
e.stopPropagation(); }); 5… e.stopPropagation(); }); 6 e.stopPropagation(); }); 7 e.stopPropagation(); }); 8– cuộn trang, hay
e.stopPropagation(); }); 9 – kích thước cửa sổ thay đổi. Lời kếtTrong 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. |
danh sách comment