Cách tốt nhất để thêm sự kiện trong JavaScript là gì?

tôi thấy 2 cách chính để thiết lập các sự kiện trong JavaScript:Cách tốt nhất để thêm sự kiện trong JavaScript là gì?

Thêm sự kiện trực tiếp bên trong các thẻ như thế này:

<a href="" onclick="doFoo()">do foo</a>
Đặt chúng bằng JavaScript như thế này:

<a id="bar" href="">do bar</a>

và thêm một sự kiện trong một phần <script> bên trong phần <head> hoặc trong một tập tin JavaScript bên ngoài, như vậy nếu bạn đang sử dụng PrototypeJS:

Event.observe(window, 'load', function() { 
    $('bar').observe('click', doBar); 
}

Tôi nghĩ rằng phương pháp đầu tiên là dễ dàng hơn để đọc và duy trì (vì hành động JavaScript được liên kết trực tiếp với liên kết) nhưng nó không sạch sẽ (vì người dùng có thể nhấp vào liên kết ngay cả khi trang không được tải đầy đủ, điều này có thể gây ra lỗi JavaScript trong một số trường hợp).

Phương pháp thứ hai là sạch hơn (hành động được thêm khi trang được tải đầy đủ) nhưng sẽ khó khăn hơn khi biết rằng một hành động được liên kết với thẻ.

Phương pháp nào là tốt nhất?

Câu trả lời sát thủ sẽ được đánh giá đầy đủ!

Nguồn

2008-08-29 paulgreg

Theo kinh nghiệm của tôi, có hai điểm chính cho điều này:

1) Điều quan trọng nhất là nhất quán. Tôi không nghĩ rằng một trong hai phương pháp này nhất thiết phải dễ đọc hơn, miễn là bạn gắn bó với nó. Tôi chỉ bị lẫn lộn khi cả hai phương pháp được sử dụng trong một dự án (hoặc thậm chí tệ hơn trên cùng một trang) bởi vì sau đó tôi phải bắt đầu tìm kiếm các cuộc gọi và không ngay lập tức biết nơi để tìm.

2) Loại thứ hai, tức là Event.observe() có lợi thế khi cùng một hành động tương tự được thực hiện trên nhiều sự kiện vì điều này trở nên rõ ràng khi tất cả các cuộc gọi đó ở cùng một nơi. Ngoài ra, như Konrad đã chỉ ra, trong một số trường hợp, điều này có thể được xử lý bằng một cuộc gọi duy nhất.

Nguồn

2008-08-29 08:10:41

Các thư viện như YUI và jQuery cung cấp các phương thức để thêm sự kiện chỉ khi DOM sẵn sàng, có thể là trước window.onload. Chúng cũng đảm bảo rằng bạn có thể thêm nhiều trình xử lý sự kiện để bạn có thể sử dụng các tập lệnh từ các nguồn khác nhau mà không có các trình xử lý sự kiện khác nhau ghi đè lẫn nhau.

Vì vậy, các lựa chọn thực tế của bạn là;

Một. Nếu tập lệnh của bạn đơn giản và tập lệnh duy nhất sẽ chạy trên trang, hãy tạo chức năng init như sau:

window.onload = function() { 
    init(); 
} 
function init() { 
    // actual function calls go here 
    doFoo(); 
}

Hai. Nếu bạn có nhiều kịch bản hoặc dự định Mashup kịch bản từ các nguồn khác nhau, sử dụng một thư viện và phương pháp onDOMReady của nó để thêm an toàn xử lý sự kiện của bạn

Nguồn

2008-08-29 07:41:45 Polsonby

Tôi nghĩ rằng phương pháp đầu tiên là dễ dàng hơn để đọc và duy trì

Tôi đã tìm thấy điều ngược lại là sự thật. Ghi nhớ rằng đôi khi nhiều hơn một trình xử lý sự kiện sẽ bị ràng buộc với một điều khiển đã cho.

Khai báo tất cả sự kiện ở một vị trí trung tâm giúp tổ chức các hành động diễn ra trên trang web. Nếu bạn cần phải thay đổi một cái gì đó bạn không cần phải tìm kiếm tất cả các nơi thực hiện cuộc gọi đến một chức năng, bạn chỉ cần thay đổi nó ở một nơi. Khi thêm nhiều phần tử cần có cùng chức năng, bạn không cần phải nhớ thêm các trình xử lý cho chúng; thay vào đó, nó thường đủ để cho phép họ khai báo một lớp, hoặc thậm chí không thay đổi chúng bởi vì chúng thuộc về một phần tử container trong đó tất cả các phần tử con được kết nối với một hành động.Từ mã thực tế:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

Bộ điều khiển sự kiện này có dây để sắp xếp tất cả các cột trong bảng. Hãy tưởng tượng nỗ lực để làm cho tất cả tiêu đề cột có thể sắp xếp riêng biệt.

Nguồn

2008-08-29 07:50:12

Bạn cũng có thể sử dụng addEventListener (không phải trong IE)/attachEvent (trong IE).

Check-out: http://www.quirksmode.org/js/events_advanced.html

Điều này cho phép bạn đính kèm một chức năng (hoặc nhiều chức năng) đến một sự kiện vào một đối tượng DOM hiện có. Họ cũng có lợi thế là cho phép bỏ đính kèm sau.

Nói chung, nếu bạn đang sử dụng số lượng javascript nghiêm trọng, có thể hữu ích khi làm cho javascript có thể đọc được của bạn, thay vì html của bạn. Vì vậy, bạn có thể nói rằng onclick=X trong html là rất rõ ràng, nhưng điều này là cả hai thiếu sự tách biệt của mã - một phụ thuộc cú pháp giữa các mảnh - và một trường hợp trong đó bạn phải đọc cả html và javascript để hiểu hành vi năng động của trang.

Nguồn

2008-08-29 08:29:19 Tyler

Tôi tin rằng phương pháp thứ hai thường được ưu tiên vì nó giữ thông tin về hành động (tức là JavaScript) tách biệt với đánh dấu theo cùng một cách CSS phân tách bản trình bày khỏi đánh dấu.

Tôi đồng ý rằng điều này làm cho việc này khó hơn một chút để xem điều gì đang xảy ra trên trang của bạn, nhưng các công cụ tốt như firebug sẽ giúp bạn rất nhiều. Bạn cũng sẽ tìm thấy hỗ trợ IDE tốt hơn nhiều nếu bạn giữ sự pha trộn của HTML và Javascript ở mức tối thiểu.

Cách tiếp cận này thực sự đi vào khi dự án của bạn phát triển và bạn thấy mình muốn đính kèm cùng một sự kiện javascript vào một loạt các loại phần tử khác nhau trên nhiều trang khác nhau. Trong trường hợp đó, nó trở nên dễ dàng hơn nhiều để có một tốc độ duy nhất gắn các sự kiện, thay vì phải tìm kiếm nhiều tệp HTML khác nhau để tìm vị trí mà một hàm cụ thể được gọi.

Nguồn

2008-08-29 09:05:59

Sở thích cá nhân của tôi là sử dụng jQuery trong tệp js bên ngoài để js hoàn toàn tách biệt với html. Javascript nên không phô trương để nội tuyến (ví dụ, ví dụ đầu tiên) không thực sự là lựa chọn tốt nhất theo ý kiến của tôi. Khi nhìn vào html, dấu hiệu duy nhất mà bạn đang sử dụng js là kịch bản có trong đầu.

Một ví dụ về gắn (và xử lý) sự kiện có thể là một cái gì đó như thế này

var myObject = { 

    allLinkElements: null, 

    init: function() 
    { 
     // Set all the elements we need 
     myObject.setElements(); 

     // Set event handlers for elements 
     myObject.setEventHandlers(); 
    }, 

    clickedLink: function() 
    { 
     // Handle the click event 
     alert('you clicked a link'); 
    }, 

    setElements: function() 
    { 
     // Find all <a> tags on the page 
     myObject.allLinkElements = $('a'); 

     // Find other elements... 
    }, 

    setEventHandlers: function() 
    { 
     // Loop through each link 
     myObject.allLinkElements.each(function(id) 
     { 
      // Assign the handler for the click event 
      $(this).click(myObject.clickedLink); 
     }); 

     // Assign handlers for other elements... 
    } 
} 

// Wait for the DOM to be ready before initialising 
$(document).ready(myObject.init);

Tôi nghĩ rằng phương pháp này rất hữu ích nếu bạn muốn giữ lại tất cả các js của bạn có tổ chức, như bạn có thể sử dụng đối tượng cụ thể cho các nhiệm vụ và mọi thứ được chứa đựng độc đáo.Tất nhiên, lợi ích to lớn của việc cho phép jQuery (hoặc một thư viện nổi tiếng khác) làm công việc khó khăn là hỗ trợ đa trình duyệt (phần lớn) được chăm sóc giúp cuộc sống trở nên dễ dàng hơn nhiều

Nguồn

2008-08-29 09:56:49

Cách tốt nhất để thêm sự kiện trong JavaScript là gì?

Trả lời

Các vấn đề liên quan