addEventListener 3

[javascript] Event의 구성요소와 등록방법

1)Event의 구성요소 (1)event target (대상) event가 일어날 객체(요소)를 말한다. (2)event type event의 종류를 의미한다. click, scroll 등이 있다. (3)event handler event가 발생했을 때 동작하는 코드를 말한다. 2)Event 등록방법 (1)Inline event target 태그 속성으로 지정함. (2)property Listener event target에 해당하는 객체의 property로 event를 등록하는 것을 말함. (3)addEventListener() event를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러 개의 event handler를 등록할 수 있음. addEventListener() 메서드는 이벤트 타입..

[Javascript] 2023.03.25

[바닐라코딩 | Javascript] - Events Practice (신호등 불 켜기), for문

1)문제 - Quiz #3 Events Practice - Starter Kit 📌 Stop, Pause, Go 클릭 시 빨간색, 주황색, 초록색불이 들어와야 합니다. book.vanillacoding.co 2)풀이 spanElements는 여러 요소를 가진 유사 배열 객체이다. 이에 for문을 통해 해당 객체의 내부 item들을 모두 순회하며 배경색을 초기화하였음. const buttonElement = document.querySelector("button"); const spanElement1 = document.querySelectorAll('span')[0] const spanElement2 = document.querySelectorAll('span')[1] const spanElement3 ..

[바닐라코딩] 2023.03.10

[바닐라코딩 | Javascript] - DOM API 요약

1)DOM Introduction (1)MDN 정의 The Document Object Model (DOM) is a programming interface for HTML. An application programming interface (API) is a computing interface which defines interactions between multiple software intermediaries. (2)Vanilla Coding 주어진 인터페이스를 이용하여 원하는대로 TV를 조종할 수 있습니다.마찬가지로 DOM이라는 인터페이스를 이용한다면, 자바스크립트를 이용하여 HTML 문서를 조종할 수 있습니다. 단, 자바스크립트의 DOM으로 HTML 문서에 접근하고 조종하게 되는 것이 HTML ..

[바닐라코딩] 2023.03.09