Javascript [ Select Event ]

양혜정·2024년 4월 7일

javascript_web

목록 보기

24/81

Select Event

select 태그의 이벤트는 click 이 아니라 change 이다.

이벤트 호출 방법

select_obj.onchange = function(){};
select_obj.onchange = () => {};
select_obj.addEventListener('change', function(){});
select_obj.addEventListener('change', ()=>{});

주의

화살표 함수를 사용할 시 this 를 인식하지 못한다.

select_obj.addEventListener('change', function(){
	const n_selectedIndex = this.selectedIndex;
  	// this 가능
  	// selectedIndex : <option> 태그의 index 번호
});

select_obj.addEventListener('change', () => {
	const n_selectedIndex = select_obj.selectedIndex;
  	// this 사용 불가능
  	// selectedIndex : <option> 태그의 index 번호
});

selectedIndex

<option> 태그의 index 번호

const n_selectedIndex = select_obj.selectedIndex;
// <option>선택하세요</option> => 0
// <option>보기1</option>	  => 1
// <option>보기2</option>	  => 2
const idx = n_selectedIndex - 1;
// 보기의 배열에서 보기1 은 0 이므로 인덱스 맞추기

dispatchEvent

이벤트 발생시키기
dispatchEvent(new Event('이벤트));

// === 함수 생성하기 === //
select_obj.dispatchEvent(new Event('change'));
// === 함수 호출하기 === //
select_obj.addEventListener('change',() => {
	...
});

자동으로 이벤트 발생

// === 자바스크립트에서 발생시키기 === //
window.onload = function(){
	document.querySelector("위치").value = "xxx";
	document.querySelector("위치").dispatchEvent(
      								new Event('change'));  
}
// === jQuery 에서 발생시키기 === //
$("위치").val("xxx").trigger('change');