Javascript [ Select Event ]

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');

---

참고

• Event : https://velog.io/@jjoung-2j/Javascript-Event

---

정리

• 09javascriptStandardObject -> 01_Array_class
  -> 06객체배열class사용_selectedIndex.html, 06.css, 06.js