쑥쑥자라기🌱

// 이벤트 위임 (Event Delegation) const list = document.querySelector('#list'); for(let item of list.children) { item.addEventListener('click', function(e) { e.target.classList.toggle('done'); }); } ul 이벤트를 하나 만들었습니다. 할 일 목록에 아이템을 클릭하면 스타일이 변하면서 할 일을 완료한 듯한 모습이 되고 다시 클릭하면 원래 모습으로 돌아오는데 JavaScript 코드를 한번 살펴보면 querySelector로 list라는 아이디를 가진 요소에 접근한 다음에 children 프로퍼티를 활용해서 for...of 문으로 아이템 각각의 이벤트 핸들러를 모..

이벤트엔 버블링 이외에도 ‘캡처링(capturing)’ 이라는 흐름이 존재합니다. 실제 코드에서 자주 쓰이진 않지만, 상황에 따라 필요할 수 있습니다. 먼저, 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 3가지 단계가 있습니다. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 타깃 단계는 이벤트 객체의 target 프로퍼티가 되는 요소에 등록되어있던 이벤트 핸들러가 동작하는 단계인데, 쉽게 생각해서 가장 처음 이벤트 핸들러가 동작하게 되는 순간이라고 생각하면 됩니다. 캡쳐링 오늘 할 일 자바스크립트 공부 독서 만약 위 코드에서 자바스크립트 공부를 클릭한다면, 버블링은 li태그 부터, ol태그, di..

// 이벤트 버블링 (Event Bubbleing) const content = document.querySelector('#content'); const title = document.querySelector('#title'); const list = document.querySelector('#list'); const items - document.querySelector('#item'); content.addEventListener('click', function() { console.log('content Event'); }); title.addEventListener('click', function() { console.log('title Event'); }); list.addEventListe..

이벤트 객체는 이벤트 타입에 따라서 갖고 있는 프로퍼티들이 조금씩 다른데요. 자주 사용되는 이벤트 객체의 프로퍼티들을 한 번 정리해 봅시다. 1. 공통 프로퍼티 아래의 프로퍼티들은 이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티입니다. 프로퍼티설명 type 이벤트 이름 ('click', 'mouseup', 'keydown' 등) target 이벤트가 발생한 요소 currentTarget 이벤트 핸들러가 등록된 요소 timeStamp 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초) bubbles 버블링 단계인지를 판단하는 값 2. 마우스 이벤트 마우스와 관련된 이벤트의 경우에는 아래와 같은 이벤트 객체의 프로퍼티들을 가지고 있습니다. 프로퍼티설명 button 누른 마..

키보드와 마우스를 이용해서 컴퓨터의 거의 모든 동작들을 다루기 때문에 특별한 경우를 제외하면 웹 페이지에서 일어날 수 있는 이벤트도 대부분은 키보드와 마우스 이벤트로 이루어집니다. 그래서 키보드로 제어할 수 있는 대표적인 이벤트인 키다운과 마우스로 제어할 수 있는 대표적인 이벤트인 클릭에 대해서 이벤트 핸들러를 하나씩 등록해보았습니다. // 이벤트 객체(Event Object) const myInput = document.querySelector('#myInput'); const myBtn = document.querySelector('#myBtn'); myInput.addEventListener('keydown', function (){ console.log('KeyboardEvent'); } myBt..

마우스 이벤트 이벤트 타입설명 mousedown 마우스 버튼을 누르는 순간 mouseup 마우스 버튼을 눌렀다 떼는 순간 click 왼쪽 버튼을 클릭한 순간 dblclick 왼쪽 버튼을 빠르게 두 번 클릭한 순간 contextmenu 오른쪽 버튼을 클릭한 순간 mousemove 마우스를 움직이는 순간 mouseover 마우스 포인터가 요소 위로 올라온 순간 mouseout 마우스 포인터가 요소에서 벗어나는 순간 mouseenter 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음) mouseleave 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음) 키보드 이벤트 이벤트 타입설명 keydown 키보드의 버튼을 누르는 순간 keypress 키보드의 버튼을 누르는 순간 ('a'..

버튼 클릭 이벤트에서 이벤트 핸들러를 등록하는 두가지 방법은 한 가지는 dom 요소에 접근한 다음 onClick 프로퍼티를 활용하는 방법이고 다른 한 가지는 HTML 속성을 활용하는 방법입니다. HTML 태그에서 직접 이벤트를 다루는 일은 일반적으로 잘 사용되지도 않고 몇 가지 문제가 있습니다. // 이벤트 핸들러 등록하기 let btn = document.querySelector('#myBtn'); btn.onclick = function () { console.log('Hi Codeit'); } btn.onclick = function () { console.log('Hi again'); } 일단 각 버튼을 눌러보면 콘솔 탭에 등록한 이벤트 핸들러가 잘 동작하는 것을 확인할 수 있습니다. 그런데 사실..

// 스타일 다루기 const today = document.querySelector('#today'); const tomorrow = document.querySelector('#tomorrow'); // style 프로퍼티 today.childten[0].style.textDecoration = 'line-through'; today.childten[0].style.backgroundColor = '#000000'; 오늘 할 일 중에서 자바스크립트 공부하기를 완료했다고 가정하고 중간에 줄을 그어봅시다. 그러면 오늘 할 일의 자식 요소들 중에서 0번 인덱스를 먼저 선택한 다음에 style 프로퍼티에 접근하는 겁니다. 그리고 나서 text-decoration을 line-through로 만들어주면 되는데요..