쑥쑥자라기🌱

// 브라우저의 기본 동작 const link = document.querySelector('#link'); const checkbox = document.querySelector('#checkbox'); const input = document.querySelector('#input'); const text = document.querySelector('#text'); 대부분의 이벤트는 발생하는 순간 각 태그별로 혹은 문서 전체적인 측면에서 브라우저가 기본적으로 갖고 있는 어떤 동작들을 수행합니다. 예를 들어서 a 태그는 다른 태그와 다르게 클릭을 했을 때 href 속성에 담긴 주소로 웹 페이지가 이동하고 input 태그의 경우에도 타입별로 다양한 동작들이 있지만 체크박스는 클릭을 했을 때 체크가 토글..

// 이벤트 위임 (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'); } 일단 각 버튼을 눌러보면 콘솔 탭에 등록한 이벤트 핸들러가 잘 동작하는 것을 확인할 수 있습니다. 그런데 사실..