이 가이드는 JavaScript에서 'onchange' 이벤트의 목적과 작업을 보여줍니다.
JavaScript에서 'onchange' 이벤트를 사용하는 방법은 무엇입니까?
“ 온체인지 ” 이벤트는 지정된 HTML 요소의 값이 변경될 때 활성화됩니다. 이 이벤트가 트리거되면 관련 JavaScript 함수가 실행되어 특정 작업을 수행합니다.
통사론
물체. 온체인지 = 기능 ( ) { myScript } ;
위 구문에서:
- 요소: 특정 HTML 요소를 나타냅니다.
- 기능(): 이벤트 트리거 시 호출될 정의된 함수를 나타냅니다.
- myScript: 'onchange' 이벤트가 발생할 때 특정 작업을 수행하는 JavaScript 함수 정의를 말합니다.
구문('addEventListener()' 메서드 사용)
물체. addEventListener ( '변화' , myScript ) ;
위 구문에서 ' addEventListener() ” 방법은 “ 온체인지 ” 이벤트는 다양한 작업을 수행하기 위해 JavaScript 기능을 실행합니다.
예제 1: 기본 구문을 사용하여 선택한 값을 표시하기 위해 'onchange' 이벤트 적용
이 시나리오에서 'onchange' 이벤트는 옵션 목록과 연결되어 변경된 옵션 값을 표시하고 해당 JavaScript 함수를 호출합니다.
HTML 코드
다음 HTML 코드를 살펴보십시오.
< h2 > 온체인지 이벤트 자바스크립트에서 h2 >< 피 > 목록에서 다른 언어를 선택하십시오. 피 >
< 아이디 선택 = '데모' 온체인지 = '견본()' >
< 옵션 값 = 'HTML' > HTML 옵션 >
< 옵션 값 = 'CSS' > CSS 옵션 >
< 옵션 값 = '자바스크립트' > 자바스크립트 옵션 >
선택하다 >
< 아이디 = 'P1' > 피 >
위의 코드에서:
- 먼저 '를 사용하여 부제목을 정의합니다. ” 태그.
- 다음으로 진술문이 포함된 단락을 추가합니다.
- 그 후, “ <선택> ” 태그는 할당된 ID가 있는 드롭다운 목록을 생성합니다. 데모 ' 그리고 ' 온체인지 ' 이벤트는 함수 '로 리디렉션됩니다. 견본() ', 각각.
- “
- 마지막으로 ID가 '인 빈 단락이 생성됩니다. P1 ” 옵션 목록에서 선택/변경된 값을 표시합니다.
자바스크립트 코드
이제 다음 JavaScript 코드의 개요:
< 스크립트 >함수 샘플 ( ) {
어디 = 문서. getElementById ( '데모' ) . 값 ;
문서. getElementById ( 'P1' ) . innerHTML = '선택한 옵션은: ' + 티 ;
}
스크립트 >
위의 코드 블록에서:
- 먼저 '라는 이름의 함수를 선언합니다. 견본() '.
- 그 정의에서 ' getElementById() ” 메서드를 통해 옵션 목록에서 선택한 옵션의 값에 액세스합니다. 값 ' 재산.
- 마지막으로 '를 사용하여 값을 표시합니다. innerHTML ' 재산.
산출
출력에서 볼 수 있듯이 드롭다운에서 옵션을 선택하면 'onchange' 이벤트가 트리거되고 해당 함수를 호출합니다.
예 2: 'addEventListener()' 메서드 구문을 사용하여 입력 필드 텍스트를 대문자로 변경하기 위해 'onchange' 이벤트 적용
이 예제에서는 'addEventListener()' 메서드를 사용하여 입력 텍스트 필드를 '대문자'로 변경하여 작동하는 'onchange' 이벤트를 설명합니다.
HTML 코드
먼저 아래 제공된 HTML 코드를 살펴보십시오.
< h2 > 온체인지 이벤트 자바스크립트에서 h2 >이름 : < 입력 유형 = '텍스트' ID = '데모' >
< 단추 > 제출하다 단추 >
위의 HTML 코드에서:
- '를 통해 수준 2의 부제목을 정의합니다. ” 태그.
- 다음으로 ' <입력> ” 레이블에 의한 필드 “ 이름 ', 컨텐츠 타입 ' 텍스트 ' 및 관련 ID ' 데모 ', 각각.
- 마지막으로 ' <버튼> ” 태그.
자바스크립트 코드
다음으로 다음 JavaScript 코드를 살펴보십시오.
< 스크립트 >문서. getElementById ( '데모' ) . addEventListener ( '변화' , 샘플 ) ;
함수 샘플 ( ) {
어디 = 문서. getElementById ( '데모' ) ;
티. 값 = 티. 값 . 대문자로 ( ) ;
}
스크립트 >
이 코드 블록에서:
- 먼저 “ document.getElementById() ” 방법은 “ 변화 ” id가 “인 입력 텍스트 필드의 값을 변경하는 이벤트 데모 ” 버튼 클릭 시.
- 다음으로 'document.getElementById()' 메서드를 사용하여 입력 텍스트 필드 'demo'에 액세스한 다음 ' 대문자() ' 방법.
산출
보시다시피 입력 텍스트는 버튼 클릭시 대문자로 변환되었습니다.
결론
JavaScript는 일반적으로 사용되는 ' 온체인지 ” 특정 요소의 값 상태가 변경되는 즉시 트리거되는 이벤트입니다. '와 유사하다. 온입력 ' 이벤트이지만 'oninput'은 값이 변경될 때 즉시 발생하는 반면 'onchange' 이벤트는 이벤트 값이 포커스를 잃을 때 트리거됩니다. 이 가이드는 JavaScript에서 'onchange' 이벤트의 목적, 작동 및 사용법을 보여줍니다.