JS- 이벤트 객체

DOM에서 이벤트를 트리거할 때 이벤트 대상 이벤트가 발생합니다. 이 대상에는 이벤트와 관련된 모든 정보가 포함되어 있습니다.

DOM의 이벤트 객체

DOM을 호환하는 브라우저는 이벤트 대상을 이벤트 처리 프로그램에 전송합니다. 이벤트 처리 프로그램을 지정할 때DOM0급 이벤트든 DOM2급 이벤트든 이벤트 대상을 전송합니다.

var btn = document.getElementById('btn')
btn.onclick = function(event){
  console.log(event.type) //'click'
}

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

이벤트 대상은 특정한 이벤트를 만드는 것과 관련된 속성과 방법을 포함하고 트리거하는 이벤트 클래스의 유형이 다르며 사용할 수 있는 이벤트 대상의 속성과 방법도 다르다.하지만 모든 사건에는 다음과 같은 멤버가 있습니다."
속성/메서드
타입
읽기와 쓰기
설명
bubbles
boolean
읽기 전용
사건이 발생했는지 아닌지를 밝히다
cancleable
boolean
읽기 전용
이벤트의 기본 동작을 취소할 수 있는지 여부를 표시합니다
currentTarget
Element
읽기 전용
이벤트 프로세서가 현재 이벤트를 처리하고 있는 요소를 표시합니다.
defaultPrevented
boolean
읽기 전용
true에 대해 preventDefault () (DOM3 레벨 이벤트 추가) 가 호출되었음을 나타냅니다.
detail
Integer
읽기 전용
이벤트 관련 세부 정보 표시
eventPhase
Integer
읽기 전용
이벤트 처리 프로그램을 호출하는 단계: 1. 포획 단계;2. 목표 단계에 있다.3, 거품 단계
preventDefault()
Function
읽기 전용
이벤트의 기본 동작을 취소합니다. 만약 cancelable가true라면 이 방법을 사용할 수 있습니다
stopImmediatePropagation()
Function
읽기 전용
이벤트의 추가 캡처 또는 거품을 제거하고 모든 이벤트 처리 프로그램의 호출을 차단합니다(DOM3 레벨 추가).
stopPropagation()
Function
읽기 전용
이벤트의 추가 포획이나 거품을 취소합니다. 버블스가true라면 이 방법을 사용할 수 있습니다
target
Element
읽기 전용
이벤트의 목표,currentTarge는 현재 이벤트 단계의 목표를 나타냅니다.
type
String
읽기 전용
이벤트 트리거 유형
view
AbstractView
읽기 전용
이벤트와 관련된 추상적인 보기는 이벤트가 발생하는 window 대상과 같습니다
이벤트 처리 프로그램 내부에서 대상this는currentTarget의 값과 같고 target은 이벤트를 포함하는 실제 목표이며 이벤트 처리 프로그램을 목표 요소에 제정하면this,currentTarget,target은 같은 값을 포함한다.
참고 이벤트 처리 프로그램이 실행되면 이벤트 대상은 삭제됩니다.
4

IE의 이벤트 대상이 IE에서 이벤트 대상에 접근하는 몇 가지 다른 방식은 이벤트 처리 프로그램을 귀속시키는 방식에 달려 있다.DOM0 레벨 방법으로 이벤트 처리 프로그램을 추가할 때 이벤트 대상은 window 대상의 속성으로 존재합니다

var btn = document.getElementById('btn')

btn.onclick = function() {
  var event  = window.event
  console.log(event.type)
}

이벤트 처리 프로그램이attachEvent () 방법으로 추가되지 않으면 이벤트 처리 프로그램의 함수 매개 변수 목록에 이벤트 대상이 매개 변수로 전송됩니다.

var btn = document.getElementById('btn')

btn.attachEvent('click', function(event){
  console.log(event.type)
}, false)

IE의 모든 이벤트 객체에는 다음과 같은 속성과 메서드가 포함됩니다.
속성/메서드
타입
읽기와 쓰기
설명
cancelBubble
boolean
읽기와 쓰기
기본값은false이지만,true로 설정하면 이벤트 거품을 취소할 수 있습니다. stopPropagation () 과 같습니다.
returnValue
boolean
읽기와 쓰기
기본값true,false로 설정하면 이벤트의 기본 행동을 취소할 수 있습니다.preventDefault () 작용과 같습니다
scrElement
Element
읽기 전용
이벤트 목표, target과 같습니다
type
string
읽기 전용
트리거된 이벤트 유형을 나타냅니다.