[javascript] document.addEventListener와 window.addEventListener의 차이점은 무엇입니까?

Program / 글쓴이

PhoneGap을 사용하는 동안을 사용하는 기본 JavaScript 코드가 document.addEventListener있지만 다음을 사용하는 자체 코드가 있습니다 window.addEventListener.

function onBodyLoad(){
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("touchmove", preventBehavior, false);
    window.addEventListener('shake', shakeEventDidOccur, false);
}

차이점은 무엇이며 어떤 것이 더 낫습니까?

답변

document과는 window다른 개체 그리고 그들은 몇 가지 다른 이벤트가 있습니다. addEventListener()그것들을 사용 하면 다른 객체로 향하는 이벤트를 듣습니다. 실제로 관심있는 이벤트가있는 것을 사용해야합니다.

예를 들어, 오브젝트에없는 오브젝트에 "resize"이벤트 window가 document있습니다.

예를 들어, "DOMContentLoaded"이벤트는 document오브젝트 에만 있습니다 .

따라서 기본적으로 관심있는 이벤트를 수신하고 .addEventListener()해당 특정 개체에 사용하는 개체를 알아야 합니다.

다음은 어떤 유형의 객체가 어떤 유형의 이벤트를 생성하는지 보여주는 흥미로운 차트입니다. https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

전파 된 이벤트 (예 : 클릭 이벤트)를 청취중인 경우 문서 오브젝트 또는 창 오브젝트에서 해당 이벤트를 청취 할 수 있습니다. 전파 된 이벤트의 유일한 주요 차이점은 타이밍입니다. 이벤트는 계층 구조에서 처음 발생 document하기 때문에 개체보다 먼저 개체에 충돌 window하지만 그 차이는 일반적으로 중요하지 않으므로 둘 중 하나를 선택할 수 있습니다. 전파 된 이벤트를 처리 할 때 필요에 맞는 이벤트 소스에 가장 가까운 개체를 선택하는 것이 일반적으로 더 좋습니다. 그것은 당신이 선택하는 것이 제안 document을 통해 window하나가 작동 할 때. 그러나 나는 종종 소스에 더 가깝게 이동 document.body하고 문서에서 더 가까운 공통 부모를 사용합니다 (가능한 경우).

답변

자바 스크립트에는 일반적으로 동일한 작업을 수행하거나 동일한 정보를 찾는 여러 가지 방법이 있습니다. 귀하의 예에서는 항상 존재하는 일부 요소를 찾고 있습니다. window그리고 document모두 (몇 가지 차이) 법안을 맞습니다.

에서 모질라 데브 네트워크 :

addEventListener ()는 단일 대상에 단일 이벤트 리스너를 등록합니다. 이벤트 대상은 문서, 문서 자체, 창 또는 XMLHttpRequest의 단일 요소 일 수 있습니다.

“대상”에 항상 의존 할 수있는 한, 유일한 차이점은 내가 듣고있는 이벤트에 따라 다르므로 좋아하는 것을 사용하십시오.

답변

window바인딩은 내장 객체 브라우저에서 제공을 의미한다. 이 포함 된 브라우저 창을 나타냅니다 document. addEventListener메소드를 호출하면 첫 번째 인수로 설명 된 이벤트가 발생할 때마다 두 번째 인수 (콜백 함수)가 호출되도록 등록합니다.

<p>Some paragraph.</p>
<script>
  window.addEventListener("click", () => {
    console.log("Test");
  });
</script>

이벤트 리스터를 추가 할 창 또는 문서를 선택하기 전에 다음 사항에 유의해야합니다.

  1. 이벤트의 대부분은에 대한 동일 window또는 document그러나 일부 이벤트는 좋아 resize하고, 다른 이벤트와 관련된 loading,
    unloading그리고 opening/closing모든 창에서 설정해야합니다.
  2. 창에는 문서가 있으므로 이벤트가 문서에 먼저 닿기 때문에 처리 할 수있는 경우 문서를 사용하여 처리하는 것이 좋습니다.
  3. Internet Explorer는 창에 등록 된 많은 이벤트에 응답하지 않으므로 이벤트 등록을 위해 문서를 사용해야합니다.

답변