JavaScript에서 버튼 클릭 이벤트를 처리하는 방법에 대한 심층적인 이해-JS 튜토리얼-php.cn

JavaScript에서 버튼 클릭 이벤트를 처리하는 방법에 대한 심층적인 이해

yulia

풀어 주다： 2018-10-11 10:12:34

원래의

6992명이 탐색했습니다.

JavaScript는 프론트엔드 개발에 널리 사용되는데, JS 버튼의 클릭 이벤트를 설정하는 방법을 알고 계시나요? 이 기사에서는 JS의 클릭 이벤트 처리 방법에 대해 설명합니다. 관심 있는 친구들은 한 번 살펴볼 수 있습니다.

1. btn.click() 메소드 사용

btn.click() 메소드는 프로그램을 통해 버튼을 클릭하여 버튼의 onclick() 이벤트를 트리거하는 것입니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <button onclick="myFunction()">点我</button>
 </body>
 <script type="text/javascript">
  function myFunction(){
   alert("have a nice day ")
  }
 </script>  
</html>

로그인 후 복사

렌더링:

JavaScript에서 버튼 클릭 이벤트를 처리하는 방법에 대한 심층적인 이해

2 addEvenListener() 메서드

addEventListener() 메서드를 사용하여 지정된 요소에 이벤트를 추가합니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <button id="btn">点击</button>
 </body>
 <script type="text/javascript">
  var btn = document.getElementById("btn");
  btn.addEventListener(&#39;click&#39;,function(){
   alert("技术是我一生的追求");
  },false)
 </script>
</html>

로그인 후 복사

Rendering:

JavaScript에서 버튼 클릭 이벤트를 처리하는 방법에 대한 심층적인 이해

3. btn.onclick=function( ) 메소드를 사용하세요

btn.onclick() 메소드는 단순히 btn 버튼의 onclick이 가리키는 메소드를 호출할 뿐 이벤트를 트리거하지는 않습니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <button id="btn">click</button>
 </body>
 <script type="text/javascript">
  var btn = document.getElementById("btn");
  btn.onclick=function(){
   alert("欢迎大家来PHP中文网学习");
  }
 </script>
</html>

로그인 후 복사

Rendering:

JavaScript에서 버튼 클릭 이벤트를 처리하는 방법에 대한 심층적인 이해