불로구

이벤트 흐름 - 발생한 이벤트는 타겟 객체에 전달된다. - 하지만 이벤트가 단번에 타겟 객체로 전달되고 사라지는 것은 아님! - 발생 이벤트는 window 객체로부터 DOM 트리를 타고 중간 DOM 객체들을 거쳐 타겟 객체로 흘러간다. - 그 후에 다시 반대 방향으로 이동하여 window 객체에 도달한 후 없어진다. - 이러한 과정을 JavaScript에서는 이벤트 흐름이라고 부른다. ​ 캡쳐 단계 vs 버블 단계 1) 캡쳐 단계 - window에서 타겟 객체까지 이벤트 객체가 전파되는 과정 - window와 중간에 있는 모든 DOM 객체들을 거쳐 타겟 객체에 이벤트 객체 전달 - 갭쳐 단계에서 실행되도록 작성된 이벤트 리스너가 있다면 흐름 순으로 실행 - 캡쳐 단계에서 실행되도록 작성된 리스너를 캡쳐 ..

이벤트 타겟과 target 프로퍼티 - target 프로퍼티는 이벤트 타겟 객체를 가리킨다. - 이벤트 타켓이란 이벤트를 유발시킨 객체 ​ 이벤트 객체의 프로퍼티를 출력해보자 targer 버튼 클릭하면 객체 출력 클릭 클릭 전 클릭 후 type 프로퍼티 현재 발생한 이벤트 종류 나타냄 target 프로퍼티 이벤트 발생시킨 객체 currentTarget 프로퍼티 현재 이벤트 리스너 실행 중인 DOM 객체 defaultPrevented 프로퍼티 이벤트의 디폴트 행동이 취소됐는지 T/F preventDefault 메소드 이벤트의 디폴트 행동 취소 메소드 ​ ​ 이벤트의 디폴트 행동 취소, preventDefault() - 이벤트의 디폴트 행동을 취소시키는 메소드 ​ 1) 이벤트 리스너에서 false를 리턴하기..

이벤트 객체 - 이벤트가 발생하면, 브라우저는 발생한 이벤트에 관련된 다양한 정보를 담은 이벤트 객체를 만든다. - 이렇게 만들어진 객체는 이벤트 리스너에 전달을 한다. - 이벤트가 처리되면 이벤트 객체는 소멸된다. ​ ​ 이벤트 객체 전달받기 - 이름을 가진 이벤트 리스너 함수 - 익명 함수 - HTML 태그의 리스너 이 3가지의 방법으로 이벤트 객체를 전달받을 수 있다. ​ ​ 1) 이름을 가진 리스너 함수 - 첫 번째 매개변수를 통해 이벤트 객체를 전달받을 수 있다. - 여기서는 매개변수 이름을 e로 사용하지만, 사용자가 마음대로 써도 된다. 안녕하세요 마우스로 클릭하면 경고 창이 뜬다! ​ ​ 2) 익명 함수 안녕하세요 출력을 그대로지만 아까와 다르게 선언부 옆에 바로 함수를 선언했다! ​ ​ 3..

이벤트 종류 - HTML5 표준 이벤트는 70개가 넘는다. - 여기서는 몇 가지만 나열하겠습니다. onkeydown 아무 키가 누르는 순간 onclick 객체에 클릭할 때 onmousedown 객체에 마우스 버튼이 눌러지는 순간 onmousemove 객체 위에서 마우스가 움직이는 동안 발생 onmouseover 마우스 커서가 객체 안으로 들어가는 순간 onmouseout 마우스 커서가 객체에서 벗어나는 순간 ​ 이벤트 리스너 만들기 - HTML 태그 내에 작성 - DOM 객체의 이벤트 리스너 프로퍼티에 작성 - DOM 객체의 addEventListener() 이용 ​ 여기서는 addEventListener()을 이용해서 이벤트를 만들어 보겠습니다. 안녕하세요 초기 마우스 올렸을 때 마우스 올렸다가 내렸을..