JavaScript DOM 이벤트 개체 및 IE 이벤트 개체 인스턴스에 대한 자세한 설명

이벤트 객체: DOM에서 이벤트가 트리거되면 이벤트 객체 이벤트가 생성됩니다. 이 객체에는 이벤트를 발생시킨 요소, 이벤트 유형 등을 포함하여 이벤트와 관련된 모든 정보가 포함됩니다. 특정 이벤트 관련 정보.

DOM

DOM 호환 브라우저의 이벤트 개체는 이벤트 개체를 이벤트 핸들러에 전달합니다. 이벤트 핸들러를 지정하는 데 DOM0 또는 DOM2 메서드가 사용되는지 여부에 관계없이 이벤트는 개체에 전달됩니다. . 이벤트 객체는 이벤트 핸들러가 실행되는 동안에만 존재합니다. 이벤트 핸들러가 실행을 완료하면 이벤트 객체가 삭제됩니다. 다음은 코드 예입니다.

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log(event.type); // "click"
}
btn.addEventListener("click", function(event) {
 console.log(event.type);
}, false);

이벤트 개체에는 이벤트를 생성한 특정 이벤트와 관련된 속성과 메서드가 포함되어 있으며, 사용 가능한 속성 메서드도 다릅니다. 하지만 모든 이벤트에는 다음과 같은 속성이나 메서드가 있습니다.

• bubbles: 이벤트 버블이 발생하는지 여부를 나타내는 부울 값

• cancellable: 이벤트의 기본 동작을 취소할 수 있는지 여부를 나타내는 부울 값

• currentTarget : element , 이벤트 핸들러가 현재 이벤트를 처리하고 있는 요소

• defaultPrevented: PreventDefault() 메서드가 호출되었는지 여부를 나타내는 부울 값

• detail: 정수, 이벤트와 관련된 세부 정보

• eventPhase: 정수, 이벤트 핸들러 호출 단계, 1은 캡처 단계, 2는 대상 단계, 3은 버블링 단계를 나타냅니다.

• preventDefault(): 함수, 이벤트의 기본 동작을 취소합니다. 이 메서드는 cancelable이 true인 경우 호출 가능

• stopImmediatePropagation(): 함수, 추가 이벤트 캡처 또는 버블링을 취소하고 모든 이벤트 핸들러가 호출되는 것을 방지합니다.

• stopPropagation(): 함수, 이벤트 추가 캡처 또는 버블링을 취소합니다. , 이 메소드는 버블이 true일 때 호출될 수 있습니다.

• target: 요소, 이벤트의 대상

• trusted: 부울 값, true이면 이벤트가 브라우저에 의해 생성되었음을 의미하고, 그렇지 않으면 이벤트를 의미합니다. JS

• 를 통해 생성되었습니다. 유형: 문자열, 트리거됨 이벤트 유형

• view: 이벤트와 연관된 추상 뷰로, 이벤트가 발생한 창 객체와 동일합니다.

다음 코드 예는 다음과 같습니다. 위 속성 중 일부의 사용법은 이벤트 흐름을 더 잘 이해하는 데도 도움이 될 수 있습니다. 페이지에 "myBtn" 버튼이 있다고 가정합니다. 버튼을 클릭하면 이벤트 핸들러가 body 요소에 등록되므로 this와 currentTarget은 모두 body 요소와 동일합니다. target 값은 버튼 요소와 동일합니다. 왜냐하면 그것이 클릭 이벤트의 실제 타겟이기 때문입니다. 버튼에 등록된 이벤트 핸들러가 없기 때문에 "click" 이벤트는 처리되기 전에 document.body까지 버블링됩니다.

document.body.onclick = function(event) {
 console.log(event.currentTarget === document.body); // true
 console.log(this === document.body); // true
 console.log(event.target === document.getElementById("myBtn")); // true
};

다음 코드에서 stopPropagation() 메서드는 이벤트의 추가 캡처 또는 버블링을 취소합니다. 버튼을 클릭하면 이벤트 버블링 메커니즘으로 인해 버튼과 본문 요소의 클릭 이벤트 핸들러가 트리거되어 "From Bth..." 및 "From Body..."를 출력해야 합니다. 이제 클릭 이벤트는 버튼 요소에서 실행된 후 DOM 계층 구조에서 더 이상 전파되지 않도록 차단되므로 본문의 이벤트 핸들러가 실행되지 않습니다.

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log("From Bth ...");
 event.stopPropagation(); // 停止事件传播
};
document.body.onclick = function() {
 console.log("From Body ...");
};

IE의 이벤트 객체

IE에서 DOM0 메서드를 사용해 이벤트 핸들러를 추가하면 이벤트 객체가 윈도우 객체의 속성으로 존재합니다. attachmentEvent() 메소드를 통해 추가되면 이벤트 객체가 이벤트 처리 함수에 매개변수로 전달됩니다. 다음은 코드 예입니다.

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 var event = window.event;
 console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
 console.log(event.type); // "click"
});

IE의 이벤트 개체에는 이를 생성한 이벤트와 관련된 속성과 메서드도 포함되어 있습니다. 이러한 속성과 메서드도 이벤트 유형에 따라 달라집니다. 그러나 모든 이벤트 개체에는 다음 속성이 포함됩니다.

• cancelBubble: 읽기 및 쓰기가 가능한 부울 값, 기본값은 false입니다. true로 설정하면 이벤트 버블링을 취소합니다.

• returnValue: 읽기 및 쓰기가 가능한 부울 값, 기본값은 true입니다. 이벤트의 기본 동작을 취소하려면 false로 설정하세요.

• srcElment: 요소, 이벤트의 대상 요소, DOM의 대상 속성과 동일

• type: 문자열, 이벤트 유형

IE에서 이벤트 핸들러의 범위는 지정하는 방법에 따라 결정되며, 이 값이 반드시 이벤트의 대상 요소를 가리킬 필요는 없습니다. 따라서 srcElement 속성을 사용하는 것이 더 안전합니다. 아래 코드 예시를 보시면 첫 번째 메소드에서는 this 의 값이 대상 요소이고, 두 번째 메소드에서는 앞서 언급한 것처럼 이 메소드의 이벤트 핸들러가 전역 범위에서 실행되므로 this 의 값은 다음과 같습니다. 창이다.

위 내용은 JavaScript DOM 이벤트 개체 및 IE 이벤트 개체 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!