JavaScript/EventHandler
-
이벤트 전파 흐름 파악하기JavaScript/EventHandler 2022. 11. 12. 18:50
이벤트 흐름에는 3가지 단계 1. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계 2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계( 가장 처음 이벤트 핸들러가 동작하게 되는 순간) 3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 오늘 할 일 자바스크립트 공부 독서 캡쳐링 단계(Top-to-Bottom) - window객체 -> document 객체 -> html태그 -> body태그 -> div태그 -> ol태그 -> li태그 버블링 단계(Bottom-to-Top) - li 태그 -> ol태그 -> div태그 -> body태그 -> html태그 -> document 객체 -> window객체 프로세스(Process) - 이벤트가 발생하면 가장 먼저 window 객체에서부터 target..
-
이벤트 등록 & 이벤트 삭제JavaScript/EventHandler 2022. 11. 10. 11:13
이벤트 등록 1. JavaScript에 직접 등록하기 - 자바스크립트 코드를 사용해 DOM엘리먼트 즉, 특정 HTML 태그를 선택해 속성으로 이벤트 발생시 호출될 콜백 메서드를 정의하는 형식 let btn = document.guerySelector('#myBtn'); btn.onclick = function(){ console.log("안녕세상아!") } Click 2. HTML태그의 속성에 이벤트 핸들러를 직접기술하는 방식 클릭해주세욤 클릭해주세욤 3. addEventListener를 사용해 기술하는 방식 let btn = document.querySelector('#myBtn'); function event1(){ console.log("안녕!!"); } function event2(){ conso..
-
이벤트(Events)란?!JavaScript/EventHandler 2022. 11. 6. 15:39
이벤트(Events)란?! - 이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다(ex 키보드에서 키 누르기, 웹 브라우저에서 새로운 페이지를 불러오는 것) - 이벤트는 웹 문서 안에서만 이루어지는 동작을 말한다. 따라서 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다 (예를 들어 브라우저 창 맨 위의 제목 표시줄에서 클릭하는 것은 이벤트라 하지 않는다) 이벤트(Events) 종류 1. 마우스이벤트(Mouse Events) - 마우스 이벤트는 마우스를 이용해서 버튼이나 휠 버튼 조작할 때 발생 click onclick When mouse click on an element mouseover onmouseover When the cursor of the mouse comes over the ..