이 자습서에서는 JavaScript로 onClick을 설정하는 방법에 대한 절차를 정의합니다.
JavaScript로 onClick을 설정하는 방법
설정하려면 온 클릭 JavaScript에는 다음과 같은 두 가지 방법이 있습니다.
- 첫 번째 방법은 HTML 요소의 온 클릭 JavaScript를 사용하는 속성.
- 두 번째 방법은 HTML 이벤트에 이벤트 리스너를 명시적으로 추가하여 ' 딸깍 하는 소리 ' 이벤트.
예제 1: JavaScript를 사용하여 HTML 요소의 onclick 속성에 값 지정
HTML 파일에서 제목과 버튼 ' 클릭 해주세요 ” 아이디와 함께 “ js ” 클릭하는 동안 JavaScript 기능을 트리거합니다.
< h2 > 세트 JavaScript를 사용하는 onClick 속성 h2 >
< 버튼 ID = 'js' > 클릭 해주세요 단추 >
다음 단계에서 생성된 버튼에 액세스하고 ' 온 클릭 ” 속성이 첨부됩니다. 버튼을 클릭하면 지정된 기능이 실행되고 “ 스타일.배경색 ” 속성은 버튼 색상을 다음과 같이 변경합니다.
문서. getElementById ( 'js' ) . 온 클릭 = 함수 jsFunc ( ) {
문서. getElementById ( 'js' ) . 스타일 . 배경색 = '보라' ;
}
해당 출력은 다음과 같습니다.
예제 2: HTML 이벤트에 이벤트 리스너를 명시적으로 추가
버튼 만들기 ' 여기를 클릭하세요! ' 및 ID 할당 ' 이벤트 ”에서 addEventListener() 메서드를 트리거합니다. '딸깍 하는 소리' 이벤트:
< 버튼 ID = '이벤트' > 여기를 클릭하세요 ! 강한 > 단추 강한 >>
버튼을 사용하여 버튼을 가져옵니다. ID 그런 다음 ' addEventListener() ” 메서드를 전달하여 딸깍 하는 소리 ' 이벤트 및 기능 ' eventFunc ” 여기서 버튼의 배경색이 변경됩니다.
문서. getElementById ( '이벤트' ) . addEventListener ( '딸깍 하는 소리' , eventFunc ) ;함수 eventFunc ( ) {
문서. getElementById ( '이벤트' ) . 스타일 . 배경색 = '녹색' ;
}
산출
예 3: 한 번에 모든 onClick 메서드 사용
이 예에서는 모든 방법의 작업이 한 번에 표시됩니다. 첫 번째는 HTML 태그 자체 내에 onclick 속성을 추가하는 기본 방법입니다. 그런 다음 JavaScript를 사용하여 onclick 속성을 설정하는 두 가지 방법도 설명했습니다.
다음 예제에서는 세 개의 버튼을 만들고 onclick 속성의 기능을 확인합니다.
- 첫 번째 버튼 ' 딸깍 하는 소리 '는 '를 호출합니다. htmlFunc() ” 클릭 이벤트에.
- 버튼 ' 클릭 해주세요 '는 할당된 ID '로 액세스됩니다. js ” 그런 다음 JavaScript를 사용하여 버튼의 onclick 속성에 값을 할당합니다.
- 버튼 ' 여기를 클릭하세요! '는 ID '를 사용하여 액세스됩니다. 이벤트 ”를 붙인 다음 “ addEventListener() ” 방법:
< 버튼 ID = 'js' > 클릭 해주세요 단추 >< br >< br >
< 버튼 ID = '이벤트' > 여기를 클릭하세요 ! 단추 >
아래 함수는 ' 온 클릭 ” 버튼의 이벤트 “ 딸깍 하는 소리 ”:
함수 htmlFunc ( ) {알리다 ( 'HTML onClick 이벤트에 의해 클릭된 버튼' ) ;
}
'를 클릭하면 클릭 해주세요 ” 버튼을 누르면 경고 메시지가 표시되는 위치에서 다음 기능이 트리거됩니다.
문서. getElementById ( 'js' ) . 온 클릭 = 함수 jsFunc ( ) {알리다 ( 'JavaScript onClick 함수로 클릭한 버튼' ) ;
}
주어진 함수는 '버튼을 트리거합니다. 여기를 클릭하세요! ”:
문서. getElementById ( '이벤트' ) . addEventListener ( '딸깍 하는 소리' , eventFunc ) ;함수 eventFunc ( ) {
알리다 ( 'EventListener 메서드를 사용하여 JavaScript onClick에 의해 클릭된 버튼' ) ;
}
출력에는 각 버튼 클릭에 대한 경고 메시지가 표시됩니다.
결론
JavaScript를 사용하여 onclick을 설정하는 방법에는 두 가지가 있습니다. 첫 번째는 JavaScript를 사용하여 HTML 요소의 onclick 속성에 값을 할당하는 것이고 두 번째는 HTML 이벤트에 이벤트 리스너를 명시적으로 추가하여 ' 딸깍 하는 소리 ' 이벤트. 이 튜토리얼에서는 예제와 함께 JavaScript로 onClick을 설정하는 방법을 정의했습니다.