본문 바로가기
728x90
300x250

자바스크립트 이벤트3

타겟(Target) 단계 타겟 단계 캡쳐단계는 최상위 DOM부터 이벤트가 발생한 지점 전까지 흐른다면 타겟 단계는 캡쳐단계 이후 이벤트를 발생시킨 지점에 머무르는 단계를 말한다. 이때 이벤트를 발생시킨 노드에 이벤트가 등록되어있다면 리스너가 실행된다. eventPhase 속성값이 2라면 캡처단계이다. 이벤트 등록 방법 $대상.on(이벤트 이름, 리스너); on()메서드를 사용해 이벤트를 등록하면 기본적으로 타겟과 버블링 단계에 등록 된다. 자바스크립트를 이요해 타겟/버블링 단계 이벤트 등록할 경우 addEventListener 제일 마지막 매개변수를 false로 주면 된다. 대상.addEventListener(이벤트 이름, 리스너, false); 캡쳐단계에 이벤트를 등록하려면 addEventListener()메서드 마지막 매개변.. 2023. 2. 27.
[javaScript] 이벤트 원리, 종류 이벤트 작동 원리 단계1 : 마크업 태그에서 마우스를 클릭하거나 키보드 키 입력 //클릭 이벤트 리스너가 연결되어 있음 단계2 : MouseEvent 객체 생성 웹브라우저는 마우스와 관련된 여러 정보가 들어있는 MouseEvent의 객체를 생성한다. (이벤트 리스너 실행) MouseEvent 객체 - 클릭한 마우스 버튼 정보 - 클릭과 함께 누른 키보드 정보 - 단계1 에서 클릭한 마우스 위치 정보 단계3 : 이벤트 리스너 실행 이벤트가 발생하면 연결한 이벤트 리스너가 실행된다. (MouseEvent 객체가 이벤트 리스너 실행) function(event){ event.이벤트 정보 } 이벤트 종류 마우스 이벤트 : 사용자가 마우스 버튼을 클릭했을 때 발생하는 이벤트. 이때 이벤트 객체에는 클릭한 마우스 .. 2023. 2. 24.
[javaScript] 자바스크립트 이벤트 HTML 이벤트 HTML 이벤트는 HTML 엘리먼트에서 발생하는 것으로 javaScript가 html 페이지에서 사용될 때 javaScript는 이러한 이벤트에 반응할 수 있다. html 이벤트는 사용자가 발생시킬 수도 있고 브라우저가 발생시킬 수도 있다. html event 발생하는 경우 몇 가지 예 HTML 웹페이지 로딩 완료 HTML 입력 필드 변경 HTML 버튼 클릭 이벤트가 감지될 때 코드를 실행할 수 있다. 이벤트 핸들러 속성은 자바스크립트 코드와 함께 HTML 요소에 추가 할 수 있다. 예제 코드 onclick 이벤트에 직접 코드를 입력해줄 수도 있고 클릭하면 지금 날짜와 시간표시 onclick 이벤트에 함수명을 입력해서 실행시킬 수도 있다. The time is? 출처 : https://w.. 2022. 8. 27.
728x90
반응형