js에서 onclick 이벤트를 작성하는 방법

onclick 이벤트는 요소를 클릭할 때 실행될 코드를 지정하는 데 사용되는 JavaScript의 이벤트 핸들러입니다. 단계는 다음과 같습니다: 1. 요소를 선택합니다. 2. onclick 속성을 설정합니다. 3. 함수를 정의합니다. onclick 이벤트를 사용하여 수행할 수 있는 작업에는 스타일 변경, 탐색 트리거, 모달 창 열기, 양식 유효성 검사 및 데이터 제출이 포함됩니다.

JavaScript에서 onclick 이벤트 작성 방법

onclick 이벤트는 요소를 클릭할 때 실행될 코드를 지정할 수 있는 JavaScript의 중요한 이벤트 핸들러입니다.

구문: ​​

<code>element.onclick = function() {
  // 执行代码
};</code>

단계:

1. 요소 선택: JavaScript 선택기를 사용하여 이벤트 핸들러를 추가할 요소를 선택합니다.
2. onclick 속성 설정: 선택한 요소에 대한 onclick 속성을 설정합니다. 이 속성의 값은 요소를 클릭할 때 실행되는 함수입니다.
3. 함수 정의: onclick 함수에서 요소를 클릭할 때 실행할 코드를 정의합니다.

예:

아래 예에서는 버튼을 만들고 버튼을 클릭할 때 페이지의 배경색을 변경하는 onclick 이벤트 핸들러를 추가합니다.

<code><button id="myButton">点击我</button>

<script>
  const button = document.getElementById("myButton");

  button.onclick = function() {
    document.body.style.backgroundColor = "blue";
  };
</script></code>

기타 사용법:

In 스타일 변경 외에도 onclick 이벤트를 사용하여 다음을 수행할 수 있습니다.

• 탐색 트리거
• 모달 창 열기
• 양식 확인
• 데이터 제출

참고:

• JavaScript 파일