Sự khác nhau giữa ("click", function()) và onclick = "function();" là gì?

Question

Vì vậy, nếu tôi muốn một cái gì đó xảy ra khi tôi bấm một nút Tôi có thể làm:

<!-- EXAMPLE A--> 
<input type="button" onclick="alert('hello world');"> 

hoặc tôi có thể làm

<!-- EXAMPLE B--> 
<input type="button" id="clickme"> 
<script> 
    $('#clickme').on("click",function(){alert('hello world');}); 
</script> 

Hoặc tất nhiên bất kỳ biến thể (trên change, trên hover) và phím tắt (.click().change()) có thể ...

Bên cạnh thực tế là A ngắn hơn, sự khác biệt là gì? Đó là tốt hơn và tại sao?

tôi nhận thấy, đó là khi tôi sử dụng .html() để tự động thêm một yếu tố để các trang web (giống như một nút) B không làm việc cho nút này mới được tạo ra, và tôi cần phải sử dụng A ...

Mọi thông tin chi tiết sẽ hữu ích!

Answer 1

<input type="button" onclick="alert('hello world');"> 

Đây là cách thức xử lý sự kiện nội tuyến. Nguyên nhân chủ yếu đây là một ý tưởng tồi là xác định rõ separation of concerns.

HTML - Structure of your page 

JS - Your page functionality 

Điều này sẽ gây ra các vấn đề bảo trì ít hơn trong thời gian dài và khi quy mô hệ thống trong kích thước.

Điều gì sẽ xảy ra nếu bạn có 100 nút trên trang của mình và bạn muốn xóa sự kiện nhấp hoặc thay đổi nó cho tất cả chúng. Nó chắc chắn sẽ là một cơn ác mộng. Ngoài ra, bạn chỉ có thể xác định một sự kiện nếu bạn liên kết nội tuyến đó.

Bằng cách chuyển sang tệp riêng biệt, bạn có nhiều tính linh hoạt và bạn chỉ có thể thực hiện một thay đổi nhỏ sẽ ảnh hưởng đến tất cả các yếu tố trên trang.

Vì vậy, cách tiếp cận thứ 2 luôn tốt hơn. và đường đi.

Bằng việc xác định các sự kiện như dưới đây

$('#clickme').on("click",function(){alert('hello world');}); 

bạn HTML trông sans sạch của bất kỳ chức năng và loại bỏ các khớp nối chặt chẽ.

Trong trường hợp bạn đã thêm động, sự kiện nội tuyến thực sự luôn hoạt động nhưng có một khái niệm gọi là Ủy quyền sự kiện. Bạn đính kèm sự kiện vào vùng chứa cha mẹ luôn hiển thị trên trang và ràng buộc sự kiện với trang đó. Khi sự kiện xảy ra vào một thời điểm sau đó trên phần tử, sự kiện sẽ bong bóng cho phụ huynh xử lý sự kiện cho bạn.

Đối với trường hợp này bạn ràng buộc các sự kiện sử dụng .on đi qua trong một selector

$(document).on('click', '#clickme', function() { 

Hãy ghi nhớ rằng ràng buộc nhiều sự kiện vào một tài liệu là một ý tưởng tồi. Bạn luôn có thể sử dụng closestStaticAncestor để ràng buộc các sự kiện.

Answer 2

đoán đây là câu hỏi thực sự của bạn:

tôi nhận thấy, đó là khi tôi sử dụng .html() để tự động thêm một yếu tố để trang web (giống như một nút) B không làm việc cho mới này nút, tạo ra và tôi cần phải sử dụng A ...

Đơn giản chỉ cần sử dụng bộ chọn trong .on() chức năng, vÀ sử dụng một lớp thay vì ID DUPLICATE cho nhiều yếu tố:

$('document').on("click", ".myButtons", function(){ 
    alert('hello world'); 
}); 

Button (s) - chuyển sang lớp (nếu bạn sử dụng ID, chỉ có FIRST sẽ được lựa chọn):

<input type="button" class="myButtons" /> 
<input type="button" class="myButtons" /> 

Đây là cách bạn nên sử dụng .on() để đính kèm xử lý sự kiện để yếu tố mới:

https://stackoverflow.com/a/14354091/584192

Answer 3

Th Cách tiếp cận đầu tiên e chỉ cho phép bạn đăng ký một trình nghe nhấp chuột trong khi cách tiếp cận thứ hai cho phép bạn đăng ký bao nhiêu tùy thích.

Nếu bạn muốn nhấp vào các yếu tố được thêm động để được nghe, bạn nên sử dụng .on(). Dưới đây là một số mã đó chứng tỏ này (jsfiddle):

HTML

<div id="mainDiv"> 
<span class="span1">hello</span> 
</div> 

JS

$(document).on("click", ".span1", function() { 
    $("#mainDiv").append("<span class=\"span1\">hello</span>"); 
}); 

$(".span1").click(function() { 
    console.log("first listener"); 
}); 

$(".span1").click(function() { 
    console.log("second listener"); 
}); 

ý rằng first listener và second listener chỉ in khi nhấp vào ngày đầu tiên xin chào, trong khi một mới span được được thêm vào khi nhấp vào bất kỳ nhịp nào.

Answer 4

khác biệt trong các công trình, nếu bạn sử dụng nhấp chuột(), bạn có thể thêm một vài fn, nhưng nếu bạn sử dụng thuộc tính chỉ có một chức năng sẽ được thực hiện - người cuối cùng một

HTML-

<span id="JQueryClick">Click #JQuery</span> </br> 
<span id="JQueryAttrClick">Click #Attr</span> </br> 

Js-

$('#JQueryClick').on("click", function(){alert('1')}); 
$('#JQueryClick').on("click", function(){alert('2')}); 

$('#JQueryAttrClick').attr('onClick'," alert('1')");//this doesn't work  
$('#JQueryAttrClick').attr('onClick'," alert('2')"); 

Nếu chúng ta nói về hiệu suất, trong mọi trường hợp sử dụng trực tiếp luôn nhanh hơn, nhưng sử dụng thuộc tính bạn sẽ chỉ có thể gán một hàm.

Try This

Reference