Liên kết sự kiện với phần tử bằng cách sử dụng Javascript thuần túy

Question

Tôi đang viết một API và rất tiếc là cần phải tránh mọi thư viện jQuery hoặc bên thứ ba. Làm thế nào chính xác là các sự kiện ràng buộc với các yếu tố thông qua jQuery?

jQuery dụ:

$('#anchor').click(function(){ 
    console.log('anchor'); 
}); 

Tôi gần bằng văn bản thuộc tính một onClick vào các phần tử ra khỏi thất vọng, nhưng tôi muốn hiểu mối liên hệ giữa các sự kiện jQuery và phần tử DOM.

Yếu tố chính xác biết để kích hoạt sự kiện jQuery khi bản thân đánh dấu không bị thay đổi như thế nào? Làm thế nào họ bắt được sự kiện DOM và ghi đè nó?

Tôi đã tạo trình xử lý Observer của riêng mình nhưng không thể hiểu rõ cách liên kết phần tử với sự kiện Observer.

Answer 1

Dưới đây là một câu trả lời nhanh:

document.getElementById('anchor').addEventListener('click', function() { 
    console.log('anchor'); 
}); 

Mỗi trình duyệt hiện đại hỗ trợ toàn bộ một API để tương tác với DOM thông qua JavaScript mà không cần phải sửa đổi HTML của bạn. Xem đây để xem mắt một con chim khá ngon: http://overapi.com/javascript

Answer 2

Bạn xác định nguyên tố bằng cách id, trong trường hợp này neo, bởi:

var el = document.getElementById('anchor'); 

Sau đó, bạn cần phải gán sự kiện click của bạn:

el[window.addEventListener ? 'addEventListener' : 'attachEvent'](window.addEventListener ? 'click' : 'onclick', myClickFunc, false); 

Và cuối cùng, chức năng của sự kiện sẽ như sau:

function myClickFunc() 
{ 
    console.log('anchor'); 
} 

Bạn c hãy đơn giản hóa nó hoặc biến nó thành một lớp lót nếu bạn không cần tương thích với các trình duyệt cũ và một loạt các trình duyệt, nhưng jQuery thực hiện khả năng tương thích giữa các trình duyệt và làm hết sức mình để cung cấp cho bạn chức năng bạn đang tìm kiếm các trình duyệt cũ hơn có thể.