불로구

자바스크립트에서는 마우스 관련 이벤트가 존재한다. x, y 타겟 객체의 부모 객체 내에서의 마우스 좌표 clientX, clientY 브라우저 윈도우의 문서 출력 영역 내에서의 마우스 좌표 offsetX, offsetY 타겟 객체 내에서의 마우스 좌표 screenX, screenY 스크린 기준으로 한 마우스 좌표 button 0 : 아무 버튼도 안 눌려짐 1 : 왼쪽 버튼 눌려짐 2 : 오른쪽 버튼 눌려짐 3 : 왼쪽, 오른쪽 버튼 모두 눌려짐 4 : 중간 버튼 눌려짐 wheelDelta 양수 : 위쪽으로 마우스 굴림 음수 : 아래쪽으로 마우스 굴림 마우스 인식 공간 이렇게 특정 공간 안에서 마우스의 좌표값을 추출할 수 있다! ​ ​ 마우스 관련 이벤트 리스너의 호출 onmousedown HTML 태그에..

이벤트 흐름 - 발생한 이벤트는 타겟 객체에 전달된다. - 하지만 이벤트가 단번에 타겟 객체로 전달되고 사라지는 것은 아님! - 발생 이벤트는 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..