addEventListener () không hoạt động nhiều lần với một nút trong JavaScript?

Để làm cho addEventListener () hoạt động liên tục khi nhấp vào nút, hãy sử dụng mã sau -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=
1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button id="pressButtonDemo">Click Me</button>
<script>
   var eventValue = function (event) {
      document.body.appendChild(document.createElement('div'))
      .textContent = event.type;
   }
   var pressed = document.querySelector("#pressButtonDemo");
   pressed.addEventListener("click", eventValue);
</script>
</body>
</html>

Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.

Đầu ra

Điều này sẽ tạo ra kết quả sau -

addEventListener () không hoạt động nhiều lần với một nút trong JavaScript?

Khi bạn nhấp vào nút “Click Me” thì bạn sẽ nhận được kết quả sau. Điều này sẽ tạo ra kết quả tiếp theo -

addEventListener () không hoạt động nhiều lần với một nút trong JavaScript?

Bây giờ, hãy nhấp vào nút một lần nữa. Điều này sẽ tạo ra kết quả sau -

addEventListener () không hoạt động nhiều lần với một nút trong JavaScript?