Computer >> Máy Tính >  >> Lập trình >> Javascript

Ràng buộc phương thức của một đối tượng với một trình xử lý nhấp chuột trong JavaScript

Sau đây là mã để liên kết phương thức của một đối tượng với một trình xử lý nhấp chuột trong JavaScript -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Binding an object's method to a click handler in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">Click Here</button>
<h3>Click on the above button to know how many times you have clicked the button</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   let testObj = {
      a: 0,
      timesClicked() {
         this.a += 1;
         resEle.innerHTML = "Times clicked = " + this.a;
      },
   };
   BtnEle.addEventListener("click", () => {
      testObj.timesClicked();
   });
</script>
</body>
</html>

Đầu ra

Ràng buộc phương thức của một đối tượng với một trình xử lý nhấp chuột trong JavaScript

Khi nhấp vào nút ‘Nhấp vào đây’ -

Ràng buộc phương thức của một đối tượng với một trình xử lý nhấp chuột trong JavaScript