210427_이벤트객체 및

이벤트객체 및 기타

이벤트 객체 :
사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체입니다.

사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있습니다. 사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져옵니다.

innerText vs innerHTML vs textContent

innerText :

'Element'의 속성으로, 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값.
연속되는 공백은 무시하고 하나의 공백만 처리

innerHTML :

'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정가능, 태그 안에 있는 HTML 전체 내용을 가져옴

HTML tag를 직접 삽입하여 실행하는 형태의 메소드는 늘 이런 위험을 가지고 있습니다. script tag를 활용하여 강제로 해커가 원하는 스크립트를 실행시키는 XSS Attack이 대표적입니다. 공격의 여지를 주지 않게 개발하는 것이 가장 좋음

textContent:

'Node'의 속성
innetText와는 달리 script나 style 태그와 상관없이 해상 노드가 가지고 있는 텍스트 값을 그대로 읽음.
연속된 공백이 그대로 표현, 숨겨진 텍스트 등 스타일이 적용된 문자열도 그대로 출력됨

<div id='my_div'>
  안녕하세요?     만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>
</div>


// innerHTML
안녕하세요?     만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>

// innerText
안녕하세요? 만나서 반가워요.

// textContent
안녕하세요?     만나서 반가워요.
숨겨진 텍스트

Advanced Challange
이벤트 객체에 대해서 더 자세히 알고 싶다면, 아래 키워드를 검색해서 학습하세요

onsubmit
onchange
onmouseover
onkeyup
event.preventDefault