이벤트 버블링: 특정 화면 요소에서 이벤트가 발생했을때 해당
이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성
(html은 트리구조로 되어 있는데 상위에 있는것을 상위 화면 요소로 보면됨)
div -> div -> div-> body
이벤트 위임 : 하위 요소에 각각의 이벤트를 붙이지 않고 상위 요소에서
하위 요소의 이벤트를 제어 하는 방식<h1>오늘의 할 일</h1> <ul class="itemList"> <li> <input type="checkbox" id="item1"> <label for="item1">이벤트 버블링 학습</label> </li> <li> <input type="checkbox" id="item2"> <label for="item2">이벤트 캡쳐 학습</label> </li> </ul> var inputs = document.querySelectorAll('input'); inputs.forEach(function(input) { input.addEventListener('click', function(event) { alert('clicked'); }); });
// 새 리스트 아이템을 추가하는 코드
var itemList = document.querySelector('.itemList');
var li = document.createElement('li');
var input = document.createElement('input');
var label = document.createElement('label');
var labelText = document.createTextNode('이벤트 위임 학습');
input.setAttribute('type', 'checkbox');
input.setAttribute('id', 'item3');
label.setAttribute('for', 'item3');
label.appendChild(labelText);
li.appendChild(input);
li.appendChild(label);
itemList.appendChild(li);
set : value들로 이루어진 집합 ,
array와 다르게 set은 같은 value를 2번 포함할 수 없음
중복값을 허용하지 않는다.
set에 이미 추가된 값을 추가하려고 하면 변화가 없음
== 와 === 의 차이 : ==는 Equal Operator 이고 , ===은 Strict Equal Operator이다.
== 은 a와 b의 값이 같은지 비교해서 같으면 true, 다르면 false라고 한다.
=== 은 엄격하게 같은지 비교할때 사용하는 연산자 이다.
==이 값만 비교했던 것과 다르게 ===은 값과 값의 종류가 같은지 비교해서 결과 값을 true, false로 반환한다.