Làm cách nào để ràng buộc một cú nhấp chuột vào một liên kết không có khung (javascript)

Question

Tôi biết điều này có thể dễ dàng thực hiện trong jQuery hoặc bất kỳ khung công tác nào khác, nhưng đó không thực sự là vấn đề. Làm thế nào để tôi đi về 'đúng' ràng buộc một sự kiện nhấp chuột trong javascript tinh khiết? Tôi biết làm thế nào để làm điều đó nội tuyến (Tôi biết điều này là khủng khiếp)

<a href="doc.html" onclick="myFunc(); return false">click here</a> 

và điều này làm javascript của tôi thực thi cho trình duyệt hỗ trợ JS và liên kết hoạt động bình thường cho những người không có javascript?

Bây giờ, làm cách nào để làm điều tương tự một cách không nội tuyến?

Answer 1

Các go tiêu chuẩn để cho câu hỏi này là trên Quirks Mode: http://www.quirksmode.org/js/events_advanced.html

Answer 2

Nếu bạn cần phải gán chỉ có một click sự kiện, bạn có thể gán onclick:

Nếu bạn có một ID:

myAnchor = document.getElementById("Anchor"); 
myAnchor.onclick = function() { myFunc(); return false; } 

bạn cũng có thể đi qua tất cả các neo:

anchors = document.getElementsByTagName("a"); 

for (var i = 0; i < anchors.length; i++) { 

anchors[i].onclick = ..... 

} 

Ngoài ra còn có một document.getElementsByClassName để mô phỏng bộ chọn lớp của jQuery nhưng nó không được hỗ trợ bởi tất cả các trình duyệt.

Nếu có thể bạn cần chỉ định nhiều sự kiện trên một phần tử, hãy truy cập addEventListener được hiển thị bởi @Jordan và @David Dorward.

Answer 3

Cách cơ bản là sử dụng document.getElementById() để tìm phần tử và sau đó sử dụng addEventListener để nghe sự kiện.

Trong HTML của bạn:

<a href="doc.html" id="some-id">click here</a> 

Trong JavaScript:

function myFunc(eventObj) { 
    // ... 
} 

var myElement = document.getElementById('some-id'); 
myElement.addEventListener('click', myFunc); 

Hoặc bạn có thể sử dụng một chức năng ẩn danh:

document.getElementyById('some-id').addEventListener('click', function(eventObj) { 
    // ... 
}); 

Answer 4

Give it ID và bạn sẽ có thể phải làm:

document.getElementById("the id").onclick = function{ ... } 

Answer 5

Bạn không cần phải sử dụng jQuery, nhưng bạn có thể dùng thử addEvent funciton phổ biến của John Resig.

Có nhiều điều được coi là 'không đúng' gắn một sự kiện trên thẻ HTML bằng javascript thuần túy.

http://www.pagecolumn.com/javascript/bind_event_in_js_object.htm

Answer 6

Đây là một phương pháp cross-browser đẹp

var on = (function(){ 
    if ("addEventListener" in window) { 
     return function(target, type, listener){ 
      target.addEventListener(type, listener, false); 
     }; 
    } 
    else { 
     return function(object, sEvent, fpNotify){ 
      object.attachEvent("on" + sEvent, function(){ 
       fpNotify(window.event); 
      }); 
     }; 
    } 
}()); 


on(document.getElementById("myAnchor"), "click", function(){ 
    alert(this.href); 
}); 

Answer 7

Nhờ Pekka, nhớ ràng buộc người nghe phải toàn bộ mảng của các yếu tố với một lớp nhất định, nhanh chóng tăng số lượng các sự kiện ràng buộc để các yếu tố.

sử dụng vòng lặp for trong một cách nhanh hơn:

for (var i = Things.length - 1; i >= 0; i--) { 
    Things[i] 
}; 

sự biểu hiện đầu tiên của vòng lặp for sẽ tính toán một lần duy nhất, vì vậy theo cách này, nó sẽ không thông qua DOM và tính toán độ dài của mảng Bên cạnh đó, vì cấu trúc ngăn xếp bước vào mảng ngược lại nhanh hơn nên bước lên phía trước.