JavaScript 학습 총화 5 - 이벤트 대상

DOM 에 있 는 어떤 이벤트 (onclick, onmouseover 등) 를 터치 하면 이벤트 대상 이벤트 가 자동 으로 발생 합 니 다. 이 대상 에는 이벤트 와 관련 된 모든 정보 가 포함 되 어 있 습 니 다. 트리거 이벤트 의 DOM 요소, 이벤트 유형 및 기타 특정 이벤트 와 관련 된 정 보 를 포함 합 니 다.
모든 브 라 우 저 는 이벤트 대상 을 지원 하지만 방식 은 다 릅 니 다.
1. DOM 의 이벤트 대상
DOM 을 호 환 하 는 브 라 우 저 는 이벤트 대상 을 이벤트 처리 프로그램 에 전송 합 니 다.
예 를 들 면:

//      
oBtn.addEventListener('click',function(event){
    console.log(event.type);          //click 
},false)

이 예 에서 이벤트 처리 프로그램 은 콘 솔 에서 이벤트 의 형식 (event. type) 을 출력 합 니 다. 이 속성 은 처 벌 된 이벤트 형식 을 포함 합 니 다.
사건 의 유형 에 따라 사건 마다 속성 과 방법 이 다 르 지만 모든 사건 에는 다음 과 같은 속성 이나 방법 이 있 습 니 다.
속성 / 방법
유형
읽다 / 쓰다
설명 하 다.
bubbles
Boolean
읽 기만 하 다
사건 의 거품 여 부 를 밝히다
cancelable
Boolean
읽 기만 하 다
이벤트 의 기본 동작 을 취소 할 수 있 는 지 여부 입 니 다.
currentTarget
Element
읽 기만 하 다
이벤트 처리 프로그램 이 현재 이 벤트 를 처리 하고 있 는 요소
defaultPrevented
Boolean
읽 기만 하 다
true 에 preventDefault () 가 호출 되 었 음 을 표시 합 니 다.
detail
Interger
읽 기만 하 다
이벤트 와 관련 된 세부 정보
eventPhase
Interger
읽 기만 하 다
이벤트 처리 프로그램 을 호출 하 는 단계 1 은 포획 단 계 를 나타 내 고 2 는 "목표 에 있다", 3 은 거품 단 계 를 나타 낸다.
preventDefault()
Function
읽 기만 하 다
이벤트 기본 동작 취소
stopImmediatePropagation()
Function
읽 기만 하 다
이벤트 의 추가 포획 이나 거품 제거
stopPropagation()
Function
읽 기만 하 다
이벤트 의 추가 포획 이나 거품 제거
target
Element
읽 기만 하 다
사건 의 목표
trusted
Boolean
읽 기만 하 다
true 를 위해 이 벤트 를 표시 할 때 브 라 우 저 에서 생 성 되 었 습 니 다. false 는 이 벤트 를 인위적으로 만 들 었 음 을 표시 합 니 다.
type
String
읽 기만 하 다
트리거 된 이벤트 종류
view
AbstractView
읽 기만 하 다
이벤트 와 연 결 된 추상 적 인 보 기 는 이벤트 가 발생 한 window 대상 과 같 습 니 다.
이벤트 처리 프로그램의 내부, 대상 this 는 항상 currentTarget 의 값 과 같 습 니 다. target 은 이벤트 의 실제 목표 만 포함 합 니 다 (currentTarget 은 실제 트리거 이벤트 의 요소 이 고 target 은 바 인 딩 이벤트 의 요소 입 니 다)

//      
oBtn.onclick=function(event){
    console.log(event.currentTarget===this);    //true
    console.log(event.target===this);              //true
}