Hướng dẫn javascript get href value onclick - javascript lấy giá trị href onclick

Khi người dùng nhấp vào liên kết trong tài liệu HTML của bạn, bạn muốn truy xuất URL đích, có nghĩa là giá trị của thuộc tính href, với JavaScript.

cách tốt nhất để thực hiện điều này là gì?

Để nhận giá trị của thuộc tính href của liên kết đã nhấp, hãy tạo trình nghe sự kiện bằng AddEventListener() và lấy giá trị của thuộc tính HREF bằng

Link

Hướng dẫn này sẽ chỉ cho bạn chính xác cách thực hiện điều này trong hai bước.

Đầu tiên, bạn sẽ học cách tạo trình nghe sự kiện cho tất cả các liên kết hoặc cho các liên kết cụ thể. Thứ hai, bạn sẽ tìm hiểu cách truy xuất giá trị của thuộc tính href của liên kết khi người dùng nhấp vào nó.

Tạo người nghe sự kiện

Phương thức

Link

Link

Phương pháp này cho phép bạn khai báo một chức năng được gọi mỗi khi sự kiện được bắn. Từ sự kiện, bạn có thể đọc các thuộc tính của phần tử DOM mà nó được đính kèm, cho phép bạn phân tích giá trị của thuộc tính href và lưu trữ nó trong một biến.

Cú pháp cho phương thức addEventListener () như sau:

// Event listener syntax
EventTarget.AddEventListener(type, listener);

Cả đối số

Link

Link

Link

Người nghe có thể là một đối tượng trong phạm vi của API web

Link

Trong trường hợp này, chúng ta cần tạo một trình nghe sự kiện cho các nhấp chuột vào các yếu tố liên kết, nghĩa là các yếu tố

Link

Một trong những cách tốt nhất để làm điều này là sử dụng phương pháp

// Event listener syntax
EventTarget.AddEventListener(type, listener);

Vì vậy, bạn có thể thực hiện một lựa chọn đơn giản cho tất cả các liên kết trên trang HTML của bạn hoặc một lựa chọn liên kết bị thu hẹp với một ID cụ thể, lớp hoặc khác.

Tại đây, cách thức một trình nghe sự kiện cho tất cả các nhấp chuột liên kết trông giống như:an event listener for all link clicks looks like:

// Create event listener for all link clicks
document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    console.log('A link was clicked');
  });
});

Nếu bạn cần thu hẹp phạm vi nghe sự kiện của mình vào các lần nhấp vào các liên kết cụ thể, ví dụ: các liên kết với

// Event listener syntax
EventTarget.AddEventListener(type, listener);

// Event listener syntax
EventTarget.AddEventListener(type, listener);

// Event listener only for 
document.querySelectorAll('a.nav-item').forEach(link => {
  link.addEventListener('click', (e) => {
    console.log('A link was clicked');
  });
});

// Event listener only for 
document.querySelectorAll('a#nav-item-01').forEach(link => {
  link.addEventListener('click', (e) => {
    console.log('A link was clicked');
  });
});

Tùy thuộc vào các yêu cầu thực hiện của bạn, bộ chọn CSS có thể đơn giản như nhắm mục tiêu các phần tử

Link

Link

Làm chủ bộ chọn CSS có thể đưa các kỹ năng lựa chọn truy vấn của bạn lên cấp độ tiếp theo. Nếu bạn là một nhà phát triển frontend, kỹ năng này sẽ cung cấp cho bạn một ưu thế trong công việc hàng ngày của bạn.

Liên quan: Người nghe sự kiện cho nhiều yếu tố trong JavaScript Event Listeners for Multiple Elements in JavaScript

Lấy thuộc tính HREF

Bây giờ bạn đã biết cách tạo người nghe sự kiện nghe các nhấp chuột trên các liên kết, cho dù tất cả các liên kết hoặc liên kết cụ thể, hãy để xem cách lấy lại giá trị của HREF

// Event listener syntax
EventTarget.AddEventListener(type, listener);

Điều này có thể được thực hiện bằng cách chuyển tham số & nbsp;

Sau đó, bạn có thể sử dụng API Web & nbsp;

// Create event listener for all link clicks
document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    // Retrieve href and store in targetUrl variable
    let targetUrl = e.target.href;
    // Output value of targetUrl to console
    console.log('A link with target URL ' + targetUrl + 'was clicked');
  });
});

Nếu bạn đã mở bảng điều khiển trình duyệt của bạn ngay bây giờ, hãy sao chép/dán và chạy mã này, sau đó nhấp vào một liên kết hoặc hai, bạn sẽ quan sát các kết quả sau:

Tóm lại là

Tôi hy vọng bạn tìm thấy hướng dẫn này hữu ích.

Gần đây tôi đã phải tự mình giải quyết thử thách này khi tôi thực hiện A & NBSP; Lớp dữ liệu & NBSP; cho mục đích phân tích trên một trong các trang web của tôi. Tôi đã mất một vài lần thử (và một vài giờ) để đi đến giải pháp tốt nhất, và tôi tin rằng đây là nó.

Nếu bạn có bất kỳ câu hỏi nào, hoặc bạn muốn chia sẻ các cách khác để đạt được điều này với phần còn lại của độc giả bài đăng này, hãy chắc chắn để lại câu trả lời bên dưới.