event , == / ===

Goun Seo·2021년 12월 10일
0

이벤트 버블링: 특정 화면 요소에서 이벤트가 발생했을때 해당
이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성
(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에 이미 추가된 값을 추가하려고 하면 변화가 없음


  • 활용 메소드 : add는 중복된 값이 없을 경우 추가
    delete는 값을 삭제, has 값이 존재하는지 확인해줌 ,clear는
    값을 set 내부의 값을 모두 삭제 , size는 값의 수 ( length역할)

== 와 === 의 차이 : ==는 Equal Operator 이고 , ===은 Strict Equal Operator이다.

== 은 a와 b의 값이 같은지 비교해서 같으면 true, 다르면 false라고 한다.

=== 은 엄격하게 같은지 비교할때 사용하는 연산자 이다.
==이 값만 비교했던 것과 다르게 ===은 값과 값의 종류가 같은지 비교해서 결과 값을 true, false로 반환한다.

profile
그리다 보면 ~ ♪

0개의 댓글