jQuery.click () so với onClick

Tôi có một ứng dụng jQuery rất lớn và tôi đang sử dụng hai phương thức bên dưới cho các sự kiện nhấp chuột.

Phương pháp đầu tiên

HTML

<div id="myDiv">Some Content</div>

jQuery

$('#myDiv').click(function(){
    //Some code
});

Phương pháp thứ hai

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

Gọi hàm JavaScript

function divFunction(){
    //Some code
}

Tôi sử dụng phương pháp thứ nhất hoặc thứ hai trong ứng dụng của mình. Cái nào tốt hơn? Tốt hơn cho hiệu suất? Và chuẩn?

Sử dụng $('#myDiv').click(function(){là tốt hơn vì nó theo mô hình đăng ký sự kiện tiêu chuẩn. (jQuery sử dụng nội bộaddEventListener và attachEvent).

Về cơ bản đăng ký một sự kiện theo cách hiện đại là cách xử lý các sự kiện không phô trương . Ngoài ra để đăng ký nhiều hơn một người nghe sự kiện cho mục tiêu bạn có thể gọi addEventListener()cho cùng một mục tiêu.

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

Tại sao nên sử dụng addEventListener? (Từ MDN)

addEventListener là cách để đăng ký một trình lắng nghe sự kiện như được chỉ định trong W3C DOM. Lợi ích của nó là như sau:

• Nó cho phép thêm nhiều hơn một trình xử lý cho một sự kiện. Điều này đặc biệt hữu ích cho các thư viện DHTML hoặc phần mở rộng Mozilla cần hoạt động tốt ngay cả khi các thư viện / tiện ích mở rộng khác được sử dụng.
• Nó cho phép bạn kiểm soát tốt hơn giai đoạn khi người nghe được kích hoạt (chụp so với sủi bọt)
• Nó hoạt động trên mọi phần tử DOM, không chỉ các phần tử HTML.

Tìm hiểu thêm về đăng ký sự kiện hiện đại -> http://www.quirksmode.org/js/events_advified.html

Các phương pháp khác như đặt thuộc tính HTML , ví dụ:

<button onclick="alert('Hello world!')">

Hoặc thuộc tính phần tử DOM , ví dụ:

myEl.onclick = function(event){alert('Hello world');}; 

đã cũ và chúng có thể được viết qua dễ dàng.

Nên tránh thuộc tính HTML vì nó làm cho đánh dấu lớn hơn và ít đọc hơn. Mối quan tâm về nội dung / cấu trúc và hành vi không được phân tách rõ ràng, làm cho một lỗi khó tìm thấy hơn.

Vấn đề với phương thức thuộc tính phần tử DOM là chỉ một trình xử lý sự kiện có thể được liên kết với một phần tử cho mỗi sự kiện.

Tìm hiểu thêm về xử lý sự kiện truyền thống -> http://www.quirksmode.org/js/events_tradmod.html

Tham khảo MDN: https://developer.mozilla.org/en-US/docs/DOM/event

Để có hiệu suất tốt hơn, hãy sử dụng JavaScript gốc. Để phát triển nhanh hơn, hãy sử dụng jQuery. Kiểm tra sự so sánh về hiệu suất tại jQuery vs Performance Element Performance .

Tôi đã thực hiện một thử nghiệm trong Firefox 16.0 32-bit trên Windows Server 2008 R2 / 7 64-bit

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

Đối với các sự kiện nhấp chuột, hãy kiểm tra các sự kiện Trình duyệt gốc với trình kích hoạt jquery hoặc jQuery vs Liên kết sự kiện nhấp chuột gốc .

Thử nghiệm trong Chrome 22.0.1229.79 32 bit trên Windows Server 2008 R2 / 7 64 bit

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

Từ những gì tôi hiểu, câu hỏi của bạn không thực sự là có nên sử dụng jQuery hay không. Thay vào đó: Tốt hơn là liên kết các sự kiện nội tuyến trong HTML hoặc thông qua người nghe sự kiện?

Liên kết nội tuyến bị phản đối. Hơn nữa, theo cách này, bạn chỉ có thể liên kết một chức năng với một sự kiện nhất định.

Vì vậy tôi khuyên bạn nên sử dụng trình nghe sự kiện. Bằng cách này, bạn sẽ có thể liên kết nhiều chức năng với một sự kiện duy nhất và hủy liên kết chúng sau này nếu cần. Hãy xem xét mã JavaScript thuần túy này:

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

Điều này hoạt động trong hầu hết các trình duyệt hiện đại.

Tuy nhiên, nếu bạn đã bao gồm jQuery trong dự án của mình - chỉ cần sử dụng jQuery: .onhoặc .clickhàm.

Bạn có thể kết hợp chúng, sử dụng jQuery để liên kết hàm với nhấp chuột

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

$('#myDiv').clicklà tốt hơn, bởi vì nó tách mã JavaScript khỏi HTML . Người ta phải cố gắng giữ cho hành vi và cấu trúc trang khác nhau . Điều này giúp rất nhiều.

Đi cho điều này vì nó sẽ cung cấp cho bạn cả tiêu chuẩn và hiệu suất.

 $('#myDiv').click(function(){
      //Some code
 });

Vì phương thức thứ hai là mã JavaScript đơn giản và nhanh hơn jQuery. Nhưng ở đây hiệu suất sẽ xấp xỉ như nhau.

IMHO, onclick là phương thức ưa thích hơn .click chỉ khi các điều kiện sau được đáp ứng:

• có nhiều yếu tố trên trang
• chỉ có một sự kiện được đăng ký cho sự kiện nhấp chuột
• Bạn lo lắng về hiệu suất di động / tuổi thọ pin

Tôi đã hình thành ý kiến ​​này vì thực tế là các công cụ JavaScript trên thiết bị di động chậm hơn 4 đến 7 lần so với các máy tính để bàn của chúng được tạo ra trong cùng một thế hệ. Tôi ghét nó khi tôi truy cập một trang web trên thiết bị di động của mình và nhận được cuộn dữ dội vì jQuery đang ràng buộc tất cả các sự kiện với chi phí trải nghiệm người dùng và thời lượng pin của tôi. Một yếu tố hỗ trợ gần đây, mặc dù điều này chỉ là mối quan tâm với các cơ quan chính phủ;), chúng tôi đã bật lên IE7 với một hộp thông báo cho biết quá trình JavaScript đang kéo dài ... chờ hoặc hủy quá trình. Điều này xảy ra mỗi khi có rất nhiều yếu tố liên kết thông qua jQuery.

Sự khác biệt trong công việc. Nếu bạn sử dụng click (), bạn có thể thêm một số hàm, nhưng nếu bạn sử dụng một thuộc tính, chỉ một hàm sẽ được thực thi - hàm cuối cùng.

BẢN GIỚI THIỆU

HTML

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

JavaScript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

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

Nếu chúng ta đang 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 một thuộc tính, bạn sẽ chỉ có thể gán một chức năng.

Sự quan tâm của vấn đề là chìa khóa ở đây, và vì vậy ràng buộc sự kiện là phương pháp thường được chấp nhận. Đây là cơ bản những gì rất nhiều câu trả lời hiện có đã nói.

Tuy nhiên đừng vứt bỏ ý tưởng đánh dấu khai báo quá nhanh. Nó có vị trí của nó, và với các khung như Angularjs, là trung tâm.

Cần phải có một sự hiểu biết rằng toàn bộ <div id="myDiv" onClick="divFunction()">Some Content</div>đã bị xấu hổ rất nhiều vì nó bị lạm dụng bởi một số nhà phát triển. Vì vậy, nó đạt đến điểm của tỷ lệ bất khả xâm phạm, rất giống tables. Một số nhà phát triển thực sự tránh tablescho dữ liệu dạng bảng. Đó là ví dụ hoàn hảo về những người hành động mà không hiểu gì.

Mặc dù tôi thích ý tưởng giữ hành vi của mình tách biệt khỏi quan điểm của tôi. Tôi thấy không có vấn đề gì với việc đánh dấu tuyên bố những gì nó làm (không phải nó hoạt động như thế nào , đó là hành vi). Nó có thể ở dạng thuộc tính onClick thực tế hoặc thuộc tính tùy chỉnh, giống như các thành phần javascript của bootstraps.

Bằng cách này, bằng cách chỉ nhìn vào đánh dấu, bạn có thể thấy những gì đang làm, thay vì cố gắng đảo ngược các ràng buộc sự kiện javascript.

Vì vậy, như là một thay thế thứ ba cho các bên trên, sử dụng các thuộc tính dữ liệu để thông báo rõ ràng hành vi trong đánh dấu. Hành vi được giữ ngoài tầm nhìn, nhưng trong nháy mắt bạn có thể thấy những gì đang xảy ra.

Ví dụ về Bootstrap:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Nguồn: http://getbootstrap.com/javascript/#popovers

Lưu ý Nhược điểm chính với ví dụ thứ hai là sự ô nhiễm của không gian tên toàn cầu. Điều này có thể được phá vỡ bằng cách sử dụng thay thế thứ ba ở trên hoặc các khung như Angular và các thuộc tính ng-click của chúng với phạm vi tự động.

Không ai tốt hơn ở chỗ chúng có thể được sử dụng cho các mục đích khác nhau. onClick(thực sự nên onclick) thực hiện tốt hơn một chút, nhưng tôi rất nghi ngờ bạn sẽ nhận thấy một sự khác biệt ở đó.

Điều đáng chú ý là họ làm những việc khác nhau: .clickcó thể bị ràng buộc với bất kỳ bộ sưu tập jQuery nào trong khi onclickphải sử dụng nội tuyến trên các yếu tố bạn muốn nó bị ràng buộc. Bạn cũng có thể liên kết chỉ một sự kiện để sử dụng onclick, trong khi .clickcho phép bạn tiếp tục liên kết các sự kiện.

Theo ý kiến ​​của tôi, tôi sẽ nhất quán về nó và chỉ sử dụng .clickở mọi nơi và giữ tất cả các mã JavaScript của tôi lại với nhau và tách khỏi HTML.

Đừng sử dụng onclick. Không có bất kỳ lý do để sử dụng nó trừ khi bạn biết những gì bạn đang làm, và bạn có thể không.

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

các sự kiện onclick, onmouseover, onmouseout, v.v ... thực sự không tốt cho hiệu suất ( chủ yếu trong Internet Explorer , hãy tìm hiểu). Nếu bạn viết mã bằng Visual Studio , khi bạn chạy một trang với những trang này, mỗi một trang sẽ tạo một khối SCRIPT riêng chiếm bộ nhớ và do đó làm chậm hiệu suất.

Chưa kể bạn nên có một mối quan tâm riêng biệt: JavaScript và bố cục nên được tách ra!

Luôn luôn tốt hơn để tạo các Trình xử lý đồng đều cho bất kỳ sự kiện nào trong số này, một sự kiện có thể thu được hàng trăm / nghìn mục, thay vì tạo hàng ngàn khối tập lệnh riêng biệt cho mỗi sự kiện!

(Ngoài ra, mọi thứ người khác đang nói.)

Chà, một trong những ý tưởng chính đằng sau jQuery là tách JavaScript khỏi mã HTML khó chịu . Phương pháp đầu tiên là con đường để đi.

Hầu hết thời gian, các phương thức JavaScript gốc là một lựa chọn tốt hơn so với jQuery khi hiệu suất là tiêu chí duy nhất, nhưng jQuery sử dụng JavaScript và làm cho việc phát triển trở nên dễ dàng. Bạn có thể sử dụng jQuery vì nó không làm giảm hiệu suất quá nhiều. Trong trường hợp cụ thể của bạn, sự khác biệt của hiệu suất là không thể biết được.

Phương pháp sử dụng đầu tiên onclickkhông phải là jQuery mà chỉ đơn giản là Javascript, vì vậy bạn không có được chi phí hoạt động của jQuery. Cách jQuery có thể mở rộng thông qua các bộ chọn nếu bạn cần thêm nó vào các phần tử khác mà không cần thêm trình xử lý sự kiện cho mỗi phần tử, nhưng như bạn có bây giờ, nó chỉ là một câu hỏi nếu bạn có cần sử dụng jQuery hay không.

Cá nhân vì bạn đang sử dụng jQuery, tôi sẽ sử dụng nó vì nó phù hợp và không tách rời đánh dấu khỏi tập lệnh.

Phương pháp đầu tiên là thích. Nó sử dụng mô hình đăng ký sự kiện nâng cao [s] , có nghĩa là bạn có thể đính kèm nhiều trình xử lý vào cùng một phần tử. Bạn có thể dễ dàng truy cập đối tượng sự kiện và trình xử lý có thể sống trong bất kỳ phạm vi chức năng nào. Ngoài ra, nó là động, tức là nó có thể được gọi bất cứ lúc nào và đặc biệt phù hợp với các yếu tố được tạo động. Cho dù bạn sử dụng jQuery, một thư viện khác hoặc các phương thức gốc trực tiếp không thực sự quan trọng.

Phương thức thứ hai, sử dụng các thuộc tính nội tuyến, cần rất nhiều hàm toàn cục (dẫn đến ô nhiễm không gian tên) và trộn nội dung / cấu trúc (HTML) với hành vi (JavaScript). Đừng dùng cái đó.

Câu hỏi của bạn về hiệu suất hoặc tiêu chuẩn không thể dễ dàng được trả lời. Hai phương pháp hoàn toàn khác nhau, và làm những điều khác nhau. Cái thứ nhất là hùng mạnh hơn, trong khi cái thứ hai bị coi thường (được coi là phong cách xấu).

Chức năng Onclick Jquery

$('#selector').click(function(){ //Your Functionality });