[JavaScript] DOM 2

- addEventListener

addEventListener()는 EventTarget의 주어진 이벤트 유형에, EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동합니다.

 

- Capture vs Bubble

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. 아래와 같은 그림처럼요.

 

이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식입니다.

 

 

 

 

- form 태그만 유일하게 name으로 접근이 가능하다.

 

ex.. 

<form action="" name="inputForm">

당신의 취미는?<br>

<input type="checkbox" name="hobby">음악감상<br>

<input type="checkbox" name="hobby">영화감상<br>

<input type="checkbox" name="hobby">등산<br>

<input type="checkbox" name="hobby">게임<br>

<input type="button" value="결과보기" onclick="showInfo()">

</form>

cf)

innerText, innerHTML 은 시작과 끝 안에 글이 있을때 읽어 줄 수 있다.

ex...

<a>아야어요</a>  // 이럴땐 읽을 수 있으나

<input type="checkbox" name="hobby" value="음악감상">음악감상<br> // 이런 태그를 닫아주지 않는 input 태그에서는 못 읽는다

 

 

- 토글(toggle)

토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.

토글 스위치는 두 가지 상태만을 가지고 있는 스위치이다.

ex) true / false