Làm cách nào để kiểm tra xem nút gửi có được nhấp trong JavaScript không?

Question

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách kiểm tra xem một nút có được nhấp hay không bằng JavaScript

Nội dung chính Show

Kiểm tra nếu một nút được bấm
Làm thế nào nó hoạt động
Nghe các lần nhấp vào nút này
Nghe các lần nhấp vào bất kỳ nút nào
Tóm lại là
Làm cách nào để kiểm tra xem một nút có được nhấp trong JavaScript không?
Làm cách nào để biết phần tử nào được nhấp trong JavaScript?
Nút gửi có thể có onclick không?
Làm cách nào để kiểm tra xem một nút có được nhấp trong jQuery không?

Hãy xem xét, chúng tôi có một phần tử nút html sau

<button id="btn">Hello</button>

Bây giờ, chúng ta cần kiểm tra xem một nút có được nhấp hay không

Kiểm tra nếu một nút được bấm

Để kiểm tra xem một nút có được nhấp hay không, trước tiên chúng ta cần truy cập vào phần tử nút bên trong JavaScript bằng phương thức document.getElementById(), sau đó thêm một Trình nghe sự kiện click vào đó

Đây là một ví dụ

const button = document.getElementbyId("btn");

button.addEventListener("click", ()=>{
   alert("button is clicked");
})

Trong đoạn mã trên, chúng ta đã thêm một cảnh báo button is clicked bên trong phương thức addEventListener(). Vì vậy, nếu người dùng nhấp vào nút, nó sẽ hiển thị cảnh báo bên trong trình duyệt rằng nút đó đã được nhấp

Trong cả hai trường hợp, nhấn nút sẽ gửi biểu mẫu gốc mà không cần xử lý riêng sự kiện onclick

Nếu bạn muốn xác thực biểu mẫu trước khi gửi, trình xử lý sự kiện tốt nhất sẽ là sự kiện gửi biểu mẫu. Thí dụ

Xem Bút PKpaEd

Trả về false từ trình xử lý sự kiện onsubmit của biểu mẫu sẽ dừng biểu mẫu được gửi

Vì vậy, nút gửi chỉ tồn tại có ý nghĩa trong một biểu mẫu

Nếu, bạn muốn một nút đơn giản kích hoạt một sự kiện khi nhấn/nhấp vào nút, hãy sử dụng thẻ nút với type=submit như thế này

Giả sử bạn muốn lắng nghe các sự kiện nhấp chuột trên một nút trong tài liệu HTML của mình. Cách tốt nhất để đạt được điều này là gì?

Để kiểm tra xem một nút có được nhấp vào trong JavaScript hay không, hãy tạo một trình xử lý sự kiện bằng cách sử dụng phương pháp addEventListener() của API Web EventTarget

Trong bài đăng này, tôi sẽ hướng dẫn bạn những cách tốt nhất để làm điều đó cho một nút duy nhất cũng như cho tất cả các nút trong tài liệu HTML của bạn

Làm thế nào nó hoạt động

Phương thức addEventListener() có hai tham số bắt buộc, type và listener

addEventListener(type, listener);

Tham số type đại diện cho loại sự kiện. JavaScript, như bất kỳ nhà phát triển nào đã thấy điều này và điều đó sẽ cho bạn biết, có một số lượng lớn các sự kiện cần lắng nghe. Trong trường hợp này, sự kiện chúng ta quan tâm là sự kiện

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

1

Tham số listener là một đối tượng đang triển khai hoặc, trong trường hợp của chúng tôi, một chức năng được kích hoạt bất cứ khi nào người nghe sự kiện nghe thấy một sự kiện

Thí dụ

Giả sử chúng ta đang xây dựng một trang web bằng HTML và JavaScript

Và rằng, trong trang web này, có một phần tử

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

3 có ID là

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

4. Chúng tôi muốn lắng nghe các lần nhấp vào phần tử đó và vì ví dụ của chúng tôi, hãy ghi chúng vào bảng điều khiển của trình duyệt

Đánh dấu HTML của chúng tôi trông như thế này

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

Chúng ta có thể tiếp cận nhiệm vụ này theo hai cách. Một là bằng cách lắng nghe các lần nhấp vào nút này một cách cụ thể. Khác bằng cách nghe các lần nhấp vào bất kỳ nút nào, trong khi vẫn biết nút nào đã được nhấp

Nghe các lần nhấp vào nút này

Để nghe các lần nhấp vào nút này và chỉ nút này, chúng ta có thể tạo một trình xử lý sự kiện nhắm mục tiêu ID của nó bằng phương thức

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

5 trong JavaScript

________số 8_______

Thêm phần này dưới dạng tập lệnh nội tuyến vào cuối thẻ

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

6 của tài liệu HTML của bạn hoặc lưu nó vào một tệp và tải nó từ CDN của bạn (đọc về mã JavaScript nội tuyến so với. tập lệnh bên ngoài)

Ví dụ: nếu chúng tôi đặt nội tuyến tập lệnh, phần đánh dấu HTML của chúng tôi sẽ trông như thế này

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
  <script>
    document.querySelector('#button-1').addEventListener('click', function(){ console.log('The button was clicked!') });
  </script>
</body>
</html>

Nghe các lần nhấp vào bất kỳ nút nào

Để lắng nghe các lần nhấp vào bất kỳ nút nào, chúng ta có thể tạo một trình lắng nghe sự kiện chung cho phần tử

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

3

Chúng ta có thể sử dụng phương pháp

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

8. Đối với mỗi

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

9 của một nút, chúng tôi sẽ lưu ID trong một biến có tên

document.querySelector('#button-1').addEventListener('click', function(){ console.log('The button was clicked!') });

// The button was clicked!

0 và tạo một trình lắng nghe sự kiện cho sự kiện

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

1

Sau đó, chúng tôi có thể ghi lại nút nào đã được nhấp trong bảng điều khiển của trình duyệt

document.querySelectorAll('button').forEach(occurence => {
  let id = occurence.getAttribute('id');
  occurence.addEventListener('click', function() {
    console.log('A button with ID ' + id + ' was clicked!') 
  } );
});

// A button with ID button-1 was clicked!

Nếu chúng ta có phần tử

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

3 thứ hai có ID là nút-2, thì tập lệnh sẽ ghi “Một nút có ID là nút-2 đã được nhấp. ” Bạn có thể kéo bất kỳ thuộc tính nào của một phần tử DOM bằng phương pháp

document.querySelector('#button-1').addEventListener('click', function(){ console.log('The button was clicked!') });

// The button was clicked!

3, vì vậy hãy thoải mái điều chỉnh chức năng này theo ý muốn

Một lần nữa, hãy nhúng thẻ này vào thẻ

document.querySelector('#button-1').addEventListener('click', function(){ console.log('The button was clicked!') });

// The button was clicked!

4 ở cuối tài liệu HTML của bạn

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="button-1">Click me!</button>
</body>
</html>

6 hoặc tải nó từ CDN của bạn

Tóm lại là

cảm ơn đã đọc đến đây. Tôi hy vọng hướng dẫn này đã giúp. Nếu bạn có bất kỳ câu hỏi nào, bạn đang gặp khó khăn khi thực hiện những điều trên hoặc bạn đã tìm thấy những cách hay khác để thực hiện điều này, hãy để lại nhận xét bên dưới

Có nhiều cách để nghe các lần nhấp vào nút, nhưng, ít nhất trong cuốn sách của tôi, đây là cách rõ ràng nhất. Nó sử dụng các phương thức tích hợp sẵn của JavaScript để hoàn thành công việc theo cách chuẩn hóa được hỗ trợ bởi tất cả các trình duyệt hiện đại

Làm cách nào để kiểm tra xem một nút có được nhấp trong JavaScript không?

Để kiểm tra xem một nút có được nhấp vào trong JavaScript hay không, hãy tạo một trình lắng nghe sự kiện bằng cách sử dụng phương thức addEventListener() của API Web EventTarget .

Làm cách nào để biết phần tử nào được nhấp trong JavaScript?

Để lấy phần tử được nhấp, hãy sử dụng thuộc tính đích trên đối tượng sự kiện . Sử dụng thuộc tính id trong sự kiện. đối tượng mục tiêu để lấy ID của phần tử được nhấp.

Nút gửi có thể có onclick không?

Trong sự kiện onclick javascript, bạn có thể sử dụng biểu mẫu. phương thức submit() để gửi biểu mẫu . Bạn có thể thực hiện hành động gửi bằng nút gửi, bằng cách nhấp vào siêu liên kết, nút và thẻ hình ảnh, v.v. Bạn cũng có thể thực hiện gửi biểu mẫu javascript bằng các thuộc tính của biểu mẫu như id, tên, lớp, tên thẻ.