728x90
change 이벤트 (onchange) ?
- HTML 요소의 값이 변경될onchange 때 발생
- 이벤트가 발생하는 DOM 요소로는
| <input type="checkbox">, <input type="color">, <input type="date">, <input type="datetime">,<input type="email">, <input type="file">, <input type="month">, <input type="number">, <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week">, <select> and <textarea> |
가 있다.
- <select>는 선택할 수 있는 여러 개의 옵션 중 하나 이상의 옵션을 선택할 때 사용하는 DOM 요소이다.
사용자가 선택하는 옵션을 바꿀 때마다 change 이벤트가 발생되고, 이벤트가 일어나는 시점에 특정 함수를
실행하려면 <select> 태그에 onchange 속성을 사용해 처리할 수 있다.
-보기 중에 한 개가 선택 되었을 때 바로 이벤트가 발생 !
즉 value값을 넘겨준다.
<body>
<select id="front" onchange="doChange();">
<option value="jv">JavaScript</option>
<option value="react">React</option>
<option value="ts">TypeScript</option>
</select>
<script>
function doChange() {
let selectedValue = document.getElementById("front").value;
console.log(selectedValue);
}
</script>
</body>
728x90
'JavaScript' 카테고리의 다른 글
| [JavaScript] 고급 문법 Promise (0) | 2023.03.17 |
|---|---|
| [JavaScript] 자바스크립트로 키보드 이벤트(keydown/keyup) 추가하기 (2) | 2023.03.12 |
| [JavaScript] 정규 표현식 2)정규식 특수 문자, 자주 쓰는 정규식 정리 (0) | 2023.03.09 |
| [JavaScript] 자바스크립트 정규 표현식 1)정규식 함수 (0) | 2023.03.09 |
| [JavaScript] 자바스크립트 내장 객체 map()함수(배열 메소드) (1) | 2023.03.08 |
댓글