Tìm kiếm trang web

javascript - jQuery.click() vs onClick

Tôi có một ứng dụng jQuery khổng lồ, và tôi đang sử dụng hai phương thức dưới đây cho các sự kiện click.

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 hoặc phương pháp đầu tiên hoặc phương pháp thứ hai trong ứng dụng của mình. Phương pháp nào tốt hơn? Tốt hơn về hiệu suất? Và theo tiêu chuẩn?

Câu trả lời #1

Sử dụng $ ('#myDiv').click(function(){ là tốt hơn vì nó tuân theo mô hình đăng ký sự kiện chuẩn. (jQuery bên trong sử dụng 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ý sự kiện một cách kín đáo. Ngoài ra, để đăng ký nhiều hơn một trình lắng nghe sự kiện cho đối tượng mục tiêu, bạn có thể gọi addEventListener() cho cùng một đối tượng 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 nghe sự kiện như được quy định trong W3C DOM. Lợi ích của nó 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 các tiện ích mở rộng của 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 bạn kiểm soát chi tiết hơn về giai đoạn khi trình nghe được kích hoạt (bắt sự kiện so với nổi bọt)
  • Nó hoạt động trên bất kỳ phần tử DOM nào, không chỉ các phần tử HTML.

Thêm về đăng ký sự kiện hiện đại -> http://www.quirksmode.org/js/events_advanced.html

Các phương pháp khác như thiết lập các 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ể bị ghi đè một cách dễ dàng.

Thuộc tính HTML nên tránh sử dụng vì nó làm cho mã đánh dấu trở nên lớn hơn và khó đọc hơn. Các mối quan tâm về nội dung/cấu trúc và hành vi không được tách biệt rõ ràng, khiến cho việc tìm lỗi trở nên khó khăn hơn.

Vấn đề với phương pháp thuộc tính phần tử DOM là chỉ một bộ xử lý sự kiện có thể được gán cho một phần tử cho mỗi sự kiện.

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âu trả lời #2

Để 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 so sánh hiệu suất tại jQuery vs Native Element Performance.

Tôi đã thực hiện một bài kiểm tra trên 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, hãy xem Sự kiện Trình duyệt Nguyên bản vs jquery trigger hoặc jQuery vs Ràng buộc Sự kiện Nhấp Nguyên bản.

Kiểm tra trên 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

Câu trả lời #3

Theo như tôi hiểu, câu hỏi của bạn thực ra không phải là về việc có nên sử dụng jQuery hay không. Đúng hơn là: Liệu có nên gắn sự kiện trực tiếp trong HTML hay thông qua các trình lắng nghe sự kiện?

Ràng buộc nội tuyến đã bị loại bỏ. Hơn nữa, cách này bạn chỉ có thể ràng buộc một hàm cho một sự kiện nhất định.

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

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

Điều này hoạt động trên 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: .on hoặc chức năng .click.

Câu trả lời #4

Chọn cái này vì nó sẽ đem lại cho bạn cả tiêu chuẩn lẫn hiệu suất.

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

Vì phương pháp 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.

Câu trả lời số 5

Bạn có thể kết hợp chúng, sử dụng jQuery để gán hàm cho sự kiện click

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

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

function divFunction(){
 //some code
}

Câu trả lời số 6

$ ('#myDiv').click tốt hơn, vì nó tách mã JavaScript ra khỏi HTML. Người ta nên cố gắng giữ hành vi và cấu trúc của trang khác nhau. Điều này rất hữu ích.

Câu trả lời số 7

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

DEMO

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 bất kỳ trường hợp nào, việc sử dụng trực tiếp luôn nhanh hơn, nhưng khi sử dụng một thuộc tính, bạn chỉ có thể gán một hàm.

Câu trả lời số 8

Theo ý kiến cá nhân, onclick là phương pháp được ưu tiên hơn .click chỉ khi các điều kiện sau đây được đáp ứng:

  • có nhiều phần tử trên trang
  • chỉ một sự kiện được đăng ký cho sự kiện click
  • Bạn lo lắng về hiệu năng/pin của điện thoại di động

Tôi hình thành quan điểm này vì thực tế rằng các engine JavaScript trên thiết bị di động chậm hơn từ 4 đến 7 lần so với các phiên bản máy tính để bàn cùng thế hệ. Tôi ghét khi truy cập một trang web trên thiết bị di động của mình và gặp phải hiện tượng cuộn lắc lư vì jQuery đang gán tất cả các sự kiện với cái giá phải trả là trải nghiệm người dùng và tuổi thọ pin của tôi. Một yếu tố hỗ trợ gần đây khác, mặc dù điều này chỉ nên là mối quan tâm với các cơ quan chính phủ ;) , là chúng tôi từng gặp IE7 hiện lên một hộp thông báo nói rằng quá trình JavaScript đang mất quá nhiều thời gian... chờ hoặc hủy quá trình. Điều này xảy ra mỗi khi có nhiều phần tử cần gán thông qua jQuery.

Câu trả lời #9

Việc tách biệt các mối quan tâm là chìa khóa ở đây, và do đó việc gán sự kiện là phương pháp được chấp nhận chung. Đây về cơ bản là những gì mà nhiều câu trả lời hiện có đã nói.

Tuy nhiên đừng vội từ bỏ ý tưởng về đánh dấu khai báo. Nó có chỗ đứng riêng, và với các framework như Angularjs, nó là trung tâm.

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

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

Bằng cách này, chỉ bằng cách liếc nhìn vào đánh dấu, bạn có thể thấy nó làm gì, thay vì cố gắng tra cứu ngược các bộ liên kết sự kiện javascript.

Vì vậy, như một lựa chọn thứ ba cho những điều trên, sử dụng các thuộc tính dữ liệu để khai báo hành vi trong mã đánh dấu. Hành vi được giữ ngoài phần nhìn thấy, nhưng chỉ cần liếc qua bạn có thể thấy điều 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 của ví dụ thứ hai là ô nhiễm không gian tên toàn cục. Điều này có thể được tránh bằng cách sử dụng một trong hai: phương án thứ ba ở trên, hoặc các framework như Angular và các thuộc tính ng-click của chúng với phạm vi tự động.

Bài viết liên quan