Sự khác biệt giữa .on ('click') so với .click ()
Câu trả lời:
Tôi nghĩ rằng, sự khác biệt là trong mô hình sử dụng.
Tôi thích .onhơn .clickvì trước đây có thể sử dụng ít bộ nhớ hơn và làm việc cho các yếu tố được thêm động.
Hãy xem xét các html sau:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>
nơi chúng tôi thêm các nút mới thông qua
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});và muốn "Thông báo!" để hiển thị một cảnh báo. Chúng ta có thể sử dụng "nhấp chuột" hoặc "bật" cho điều đó.
Khi chúng ta sử dụng click
$("button.alert").click(function() {
alert(1);
});với ở trên, một trình xử lý riêng biệt được tạo cho mỗi phần tử phù hợp với bộ chọn. Điều đó có nghĩa là
- nhiều yếu tố phù hợp sẽ tạo ra nhiều trình xử lý giống hệt nhau và do đó làm tăng dung lượng bộ nhớ
- các mục được thêm động sẽ không có trình xử lý - tức là, trong html ở trên, "Thông báo!" mới được thêm vào các nút sẽ không hoạt động trừ khi bạn khởi động lại trình xử lý.
Khi chúng ta sử dụng .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});với phần trên, một trình xử lý duy nhất cho tất cả các phần tử khớp với bộ chọn của bạn, bao gồm các phần tử được tạo động.
... một lý do khác để sử dụng .on
Như Adrien bình luận dưới đây, một lý do khác để sử dụng .onlà các sự kiện được đặt tên.
Nếu bạn thêm một trình xử lý với .on("click", handler)bạn, thường loại bỏ nó .off("click", handler)sẽ loại bỏ trình xử lý đó. Rõ ràng điều này chỉ hoạt động nếu bạn có một tham chiếu đến hàm, vậy nếu bạn không có thì sao? Bạn sử dụng không gian tên:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });không ràng buộc thông qua
$("#element").off("click.someNamespace");on('click' ...), xem stackoverflow.com/a/3973060/759452 tức là. on('click.darkenallothersections' ...)và đồng thời on('click.displaynextstep' ...), sau đó tôi chỉ có thể hủy liên kết với người tôi chọn sử dụng.unbind('click.displaynextstep')
on()là xu hướng trong jQuery. Tôi đã phải cập nhật $(window).load(function() {});lên $(window).on("load", function (e) {})khi tôi nâng cấp lên jQuery 3.
Có sự khác biệt giữa các mã sau đây?
Không, không có sự khác biệt về chức năng giữa hai mẫu mã trong câu hỏi của bạn. .click(fn)là một "phương pháp phím tắt" cho .on("click", fn). Từ tài liệu cho.on() :
Có các phương pháp tốc ký cho một số sự kiện như
.click()có thể được sử dụng để đính kèm hoặc kích hoạt trình xử lý sự kiện. Để biết danh sách đầy đủ các phương pháp tốc ký, hãy xem danh mục sự kiện .
Lưu ý rằng .on()khác với .click()ở chỗ nó có khả năng tạo các trình xử lý sự kiện được ủy nhiệm bằng cách truyền selectortham số, trong khi .click()không. Khi .on()được gọi mà không có selectortham số, nó hoạt động giống hệt như .click(). Nếu bạn muốn đoàn sự kiện, sử dụng .on().
selectortham số. Nếu bạn gọi .on()mà không có selectortham số thì không có cải thiện hiệu suất so với sử dụng .click().
.on()là cách được đề xuất để thực hiện tất cả các ràng buộc sự kiện của bạn kể từ jQuery 1.7. Nó cuộn tất cả các chức năng của cả hai .bind()và .live()thành một chức năng thay đổi hành vi khi bạn truyền cho nó các tham số khác nhau.
Như bạn đã viết ví dụ của bạn, không có sự khác biệt giữa hai. Cả hai ràng buộc một xử lý cho clicksự kiện #whatever. on()cung cấp thêm tính linh hoạt trong việc cho phép bạn ủy thác các sự kiện do trẻ em của #whatevermột chức năng xử lý duy nhất, nếu bạn chọn.
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()không? Ngoài ra, điều này dường như mâu thuẫn với các câu trả lời khác nói rằng nó chỉ có chức năng của .click(), và do đó không áp dụng cho các sự kiện trong tương lai.
.on()có thể làm những gì .click()làm và làm những gì .bind()và .live()làm - nó phụ thuộc những gì thông số bạn gọi nó với. (Một số câu trả lời khác cũng đề cập đến vấn đề này.) Lưu ý rằng "Liên kết với tất cả các liên kết bên trong #whthing" không phải là cái gì .live(), nó là cái gì .delegate(). .live()liên kết với tất cả bên trong documentchứ không phải để bạn chỉ định container. Lưu ý cũng .live()không được chấp nhận từ jQuery 1.7 trở đi.
Như được đề cập bởi các câu trả lời khác:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })Lưu ý rằng mặc dù .on()hỗ trợ một số kết hợp tham số khác .click()không có, cho phép nó xử lý phân quyền sự kiện (thay thế .delegate()và .live()).
(Và rõ ràng có các phương pháp phím tắt tương tự khác cho "keyup", "tập trung", v.v.)
Lý do tôi đăng một câu trả lời bổ sung là để đề cập đến những gì xảy ra nếu bạn gọi .click()mà không có tham số:
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");Lưu ý rằng nếu bạn sử dụng .trigger()trực tiếp, bạn cũng có thể truyền các tham số bổ sung hoặc đối tượng sự kiện jQuery, điều mà bạn không thể làm với .click().
Tôi cũng muốn đề cập rằng nếu bạn nhìn vào mã nguồn jQuery (trong jquery-1.7.1.js), bạn sẽ thấy rằng bên trong hàm .click()(hoặc .keyup(), v.v.) sẽ thực sự gọi .on()hoặc .trigger(). Rõ ràng điều này có nghĩa là bạn có thể yên tâm rằng chúng thực sự có kết quả tương tự, nhưng điều đó cũng có nghĩa là việc sử dụng .click()có thêm một chút chi phí - không phải lo lắng hay thậm chí nghĩ về hầu hết các trường hợp, nhưng về mặt lý thuyết nó có thể quan trọng trong những trường hợp đặc biệt.
EDIT: Cuối cùng, lưu ý .on()cho phép bạn liên kết một số sự kiện với cùng một chức năng trong một dòng, ví dụ:
$("#whatever").on("click keypress focus", function(){});.click().)
Chúng có vẻ giống nhau ... Tài liệu từ hàm click () :
Phương thức này là lối tắt cho .bind ('click', handler)
Tài liệu từ ngày () :
Kể từ jQuery 1.7, phương thức .on () cung cấp tất cả các chức năng cần thiết để đính kèm các trình xử lý sự kiện. Để được trợ giúp chuyển đổi từ các phương thức sự kiện jQuery cũ hơn, hãy xem .bind (), .delegate () và .live (). Để xóa các sự kiện bị ràng buộc với .on (), hãy xem .off ().
.clickvs.on
.click các sự kiện chỉ hoạt động khi phần tử được kết xuất và chỉ được gắn vào các phần tử được tải khi DOM sẵn sàng.
.on các sự kiện được gắn động với các phần tử DOM, rất hữu ích khi bạn muốn đính kèm một sự kiện vào các phần tử DOM được hiển thị theo yêu cầu ajax hoặc một cái gì đó khác (sau khi DOM đã sẵn sàng).
Tại đây bạn sẽ nhận được danh sách các cách khác nhau để áp dụng sự kiện nhấp chuột. Bạn có thể chọn một cách phù hợp là có thể thay đổi hoặc nếu nhấp chuột của bạn không hoạt động, chỉ cần thử một cách khác trong số này.
$('.clickHere').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$('.clickHere').on('click', function(){
// same as first one
// do your stuff
})
$(document).on('click', '.clickHere', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the '.clickHere ' element. This is
// called event delegation
// do your stuff
});
$('body').on('click', '.clickHere', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$('.clickHere').off().on('click', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})Theo như tìm hiểu từ internet và một số bạn bè .on () được sử dụng khi bạn tự động thêm các yếu tố. Nhưng khi tôi sử dụng nó trong một trang đăng nhập đơn giản, nơi sự kiện nhấp sẽ gửi AJAX đến node.js và khi trả lại các phần tử mới, nó bắt đầu gọi các cuộc gọi đa AJAX. Khi tôi thay đổi nó để bấm () mọi thứ đều ổn. Thật ra tôi không gặp phải vấn đề này trước đây.
CÁC YẾU TỐ MỚI
Là một phụ lục cho các câu trả lời toàn diện ở trên để làm nổi bật các điểm quan trọng nếu bạn muốn nhấp để đính kèm với các yếu tố mới:
- các phần tử được chọn bởi bộ chọn đầu tiên, ví dụ $ ("body") phải tồn tại tại thời điểm khai báo được thực hiện nếu không có gì để đính kèm.
- bạn phải sử dụng ba đối số trong hàm .on () bao gồm bộ chọn hợp lệ cho các thành phần đích của bạn làm đối số thứ hai.
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- nó hiệu quả hơn $ ('. CẬP NHẬT'). click (function () {});
- nó có thể sử dụng ít bộ nhớ hơn và hoạt động cho các yếu tố được thêm động.
- đôi khi dữ liệu được tìm nạp động với nút chỉnh sửa và xóa không tạo ra sự kiện JQuery tại thời điểm EDIT HOẶC XÓA DỮ LIỆU dữ liệu hàng theo mẫu, thời gian đó
$(document).on('click','.UPDATE',function(){ });hoạt động hiệu quả giống như dữ liệu được tìm nạp bằng cách sử dụng jquery. nút không hoạt động tại thời điểm cập nhật hoặc xóa:
