event.currentTarget 메서드를 사용할 때왜 HTML 텍스트 입력에 대해서는 event.currentTarget.value를 쓰고,드롭다운 목록에 대해서는 event.currentTarget.options를 쓰는가?
<script> selection.addEventListener('change',(event) => { console.log(event.currentTarget.options) }) </script> <body> <select> <option>1</option> <option>2</option> <option>3</option> </select> </body>
HTML <select>로 드롭다운 목록을 선택하는 이벤트가 발생할 때 event.currentTarget은 HTML Select Element을 가리킴. 특히, HTML Select Element의 property 중에서 options는 HTML Options Collection을 반환함.
※ 각 객체는 자신이 속한 prototype의 property를 사용할 수 있음
event.currentTarget event.currentTarget.options
객체는 그 prototype의 속성을 공유하므로 HTML Select Element는 ___.innerText 같은 속성 이용이 가능함
반면에, HTML Select Element은 HTML Collection의 속성인 ___.item 은 이용이 가능하나 ___.innerText 은 이용 불가
마찬가지 이유로, HTML Collection은 array-like인 객체일 뿐 array는 아니므로 event.currentTarget.options에 대해서는 array 객체만 사용이 가능한 forEach() 메서드는 사용이 불가함
2022.03.06 - [Javascript] - (2022. 3. 6.) Prototype
HTML Options Collection에 대해 forEach() 메서드를 사용할 방법은 없을까?
HTMLCollection을 배열로 변환하는 가장 효율적인 방법
event.currentTarget의 속성으로 무엇을 쓸 수 있나?
HTML <select>로 드롭다운 목록을 선택하는 이벤트가 발생할 때 event.currentTarget은 HTML Select Element을 가리킴. 특히, HTML Select Element의 property 중에서 options는 HTML Options Collection을 반환함.
※ 각 객체는 자신이 속한 prototype의 property를 사용할 수 있음
객체는 그 prototype의 속성을 공유하므로 HTML Select Element는 ___.innerText 같은 속성 이용이 가능함
반면에, HTML Select Element은 HTML Collection의 속성인 ___.item 은 이용이 가능하나 ___.innerText 은 이용 불가
마찬가지 이유로, HTML Collection은 array-like인 객체일 뿐 array는 아니므로 event.currentTarget.options에 대해서는 array 객체만 사용이 가능한 forEach() 메서드는 사용이 불가함
2022.03.06 - [Javascript] - (2022. 3. 6.) Prototype
HTMLCollection을 배열로 변환하는 가장 효율적인 방법
'JavaScript' 카테고리의 다른 글