Xử lý sự kiện là một trong những lý do quan trọng khác để sử dụng jQuery. Có một số khác biệt giữa các trình duyệt về cách thực hiện, jQuery chuẩn hóa thành một API đơn giản, đồng thời thực thi một số phương pháp hay nhất.
Về cơ bản có một phương pháp bạn cần biết: .on()- nó hoạt động như thế này:
$("button").on("click", function() ( // do something ));Ở đây chúng tôi cung cấp cho .on()phương thức chỉ hai tham số. Tên của sự kiện (“nhấp chuột”) và một hàm để chạy khi sự kiện đó xảy ra trên bất kỳ phần tử nào trong lựa chọn đó. Đọc khá sạch, phải không?
Những người có một số kinh nghiệm jQuery trước có thể quen với phương pháp ràng buộc khác thích .bind(), .live()hoặc .delegate(). Đừng lo lắng về những điều đó nữa, jQuery hiện đại đã kết hợp tất cả chúng vào .on()trong đó luôn hoạt động tốt nhất.
Khi liên kết một sự kiện như chúng tôi đã làm ở trên, bạn có thể (và thường rất thông minh) bao gồm tên tham số trong hàm. Tham số đó sẽ là "đối tượng sự kiện" bên trong hàm:
$("button").on("click", function(event) ( // event => "the event object" ));Thông qua đối tượng sự kiện đó bạn nhận được rất nhiều thông tin. Bạn đã hơi quen thuộc với nó vì chúng tôi đã sử dụng nó .preventDefault()và .stopPropagation(). Nhưng cũng có rất nhiều thông tin trực tiếp khác trong đối tượng đó. Những thứ như loại sự kiện đó là gì (trong trường hợp nhiều sự kiện kích hoạt cùng một chức năng này), khi nào nó xảy ra, nó xảy ra ở đâu (tọa độ, nếu có), nó xảy ra trên yếu tố nào và hơn thế nữa. Bạn nên kiểm tra đối tượng sự kiện thường xuyên khi viết mã.
Có một khái niệm về ủy nhiệm sự kiện là vô cùng quan trọng trong việc làm việc với các sự kiện. Đó là một thực hành tốt nhất ngày nay rất thông minh. Nó kết hợp ý tưởng về phạm vi.
Một cách truyền thống để nghĩ về liên kết sự kiện là “tìm tất cả các nút trên trang và liên kết một sự kiện nhấp chuột với chúng”. Tất nhiên điều đó hoạt động, nhưng nó là:
- Không hiệu quả lắm
- Mong manh
Không hiệu quả vì bạn ngay lập tức buộc JavaScript phải tìm tất cả các phần tử nút đó khi, với ủy quyền, bạn có thể chỉ tìm thấy một phần tử dễ tìm hơn.
Dễ vỡ bởi vì nếu nhiều nút được thêm vào trang, chúng đã bỏ lỡ con thuyền trên ràng buộc và sẽ cần được ràng buộc lại.
Với ủy quyền sự kiện, bạn sẽ liên kết sự kiện nhấp chuột đó với một phần tử nằm trên cây DOM cao hơn so với các nút chứa tất cả chúng. Có thể là một nơi nào đó, có thể là documentchính nó. Khi bạn liên kết sự kiện nhấp chuột với phần tử cao hơn đó, bạn cho nó biết rằng bạn vẫn chỉ quan tâm đến các nhấp chuột xảy ra trên các nút. Sau đó, khi một nút được nhấp, thông qua bản chất của sự kiện sôi sục, nhấp chuột đó cuối cùng sẽ kích hoạt trên phần tử cao hơn. Nhưng đối tượng sự kiện sẽ biết liệu nhấp chuột ban đầu có xảy ra trên một nút hay không và chức năng bạn đã thiết lập để kích hoạt sự kiện đó sẽ kích hoạt hoặc không kích hoạt khi biết thông tin đó.
Trong video màn hình này, chúng tôi chứng minh điều đó như sau:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Bây giờ hãy tưởng tượng nếu chúng ta thêm một cái khác vào đó . Chúng tôi không cần phải ràng buộc lại bất kỳ sự kiện nào, vì sự kiện vẫn được ràng buộc một cách vui vẻ với phạm vi và các sự kiện sẽ vẫn bong bóng từ vùng văn bản mới được thêm vào. Điều này đặc biệt hữu ích trong môi trường ứng dụng web nơi bạn thường xuyên thêm các phần tử mới vào trang.
Một điều tốt nữa cần biết về ràng buộc sự kiện jQuery là chúng không loại trừ lẫn nhau. Nếu bạn thêm một trình xử lý nhấp chuột khác vào cùng một phần tử chính xác đã có, nó sẽ chỉ thêm một trình xử lý nhấp chuột khác. Bạn không ghi đè lên cái trước. jQuery chỉ xử lý điều này khá dễ dàng cho bạn. Bạn luôn có thể hủy liên kết chúng nếu bạn thực sự muốn ghi đè một hàm đã ràng buộc trước đó.
Nếu đó là cùng một sự kiện chính xác, bạn nên biết rằng để hủy liên kết một sự kiện cụ thể trong số chúng chứ không phải sự kiện khác, bạn sẽ cần phải đặt tên cho các sự kiện. Điều đó xảy ra bằng cách sử dụng một dấu chấm trong tên sự kiện, chẳng hạn như click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), như chúng tôi chưa đề cập trước đây, là cách bạn hủy liên kết các sự kiện.
Có rất nhiều sự kiện DOM có thể xảy ra. Nhấp chuột là cách hiển nhiên chính lớn, nhưng có nhấp đúp, di chuột và di chuột, nhấn phím xuống và nhấn phím, tạo thành các hình thức cụ thể như làm mờ và thay đổi, và nhiều hơn thế nữa. Nếu bạn quan tâm đến danh sách đầy đủ, bạn có thể nhận được một danh sách như thế này.
Bạn có thể liên kết nhiều sự kiện cùng lúc như sau:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Có một số trường hợp bạn đang chờ đợi một sự kiện xảy ra, nhưng một khi nó xảy ra, bạn không quan tâm đến nó nữa hoặc rõ ràng là không muốn kích hoạt chức năng bạn đã ràng buộc nữa. Đó là những gì .one()chức năng nói về. Một trường hợp sử dụng tiêu chuẩn cho đó là nút gửi biểu mẫu (nếu bạn đang xử lý bằng Ajax hoặc bất cứ thứ gì). Về cơ bản, bạn có thể muốn tắt nút gửi đó sau khi họ đã nhấn nút đó cho đến khi bạn có thể xử lý thông tin đó và cung cấp cho họ phản hồi thích hợp. Tất nhiên, đó không phải là trường hợp sử dụng duy nhất, nhưng hãy ghi nhớ điều đó. .one()== chỉ một lần.