[WebDevCurriculum] addEventListener / class toggle
5115 단어 WebDevCurriculumWebDevCurriculum
개요
Javascript의 기능 중 가장 기본이 되며, 실무에서도 활용도가 높은
- querySelector
- addEventListener
- class toggle
에 대해 이해한다.
Checklist
- querySelector
let row1Squares = document.querySelectorAll('.row1 .square');
→ selector(식별자)에 기재된 class의 tag attribute(속성)을 나타낸다.
- addEventListener
node.addEventListener('click', click1);
→ 특정 'type'에 기재된 event가 발생할 경우 callback 함수를 동작한다.
for(let node of row1Squares) {
node.addEventListener('click', click1);
}
function click1(e){
let color = e.target.style.backgroundColor
if(color==='') {e.target.style.backgroundColor = 'yellow'}
else if(color==='yellow') {e.target.style.backgroundColor= ''};
}
- class toggle
e.target.classList.toggle('enabled');
→ 특정 시점 및 이벤트 동작 등에 맞추어 class를 toggle(추가/제거)한다.
→ 별도의 if logic이 필요하지 않으므로, 간편한 분기처리가 가능해진다.
function click2(e){
let classList = e.target.classList;
console.log(classList);
e.target.classList.toggle('enabled');
}
참고개념
- DOM
→ 최종적인 application 모습은 여러 document가 누적된 DOM형태이며, DOM을 활용하여 다양한 속성을 추가 및 제거할 수 있다.
→ DOM에 대한 개념은 Javascript의 원론적 개념인 VanillaJS를 잘 이해하고 있어야 한다.
정리
0. why
- VanillaJS와 관련한 기본적인 API나 메소드 등에 대해 잘 숙지하고 있어야, 실무에서 활용되는 여러 Javascript logic을 이해할 수 있다.
1. what
- Javascript 언어가 가지는 특징이나 기본적인 개념에 대해 이해한다.
2. how
- 실무 Javascript와 많은 연관이 있는 VanillaJS 문법 및 API 등을 파악한다.
참고자료
다양한 class 추가/제거 관련 메소드들(★toggle)
https://www.codingfactory.net/10295
Jqeury / class add or remove
https://liufeier.tistory.com/22
Author And Source
이 문제에 관하여([WebDevCurriculum] addEventListener / class toggle), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gyrbs22/WebDevCurriculum-addEventListener-class-toggle저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)