이의 혼란과 자바 스크립트의 문서 개체

Question

사실 난 요즘 자바 스크립트 이벤트를 배우고 있지만, 그 사이에 내가 어떤 코딩을하고있는 문제는 내가 함수를 만들 때

이

Q1)한다는 점에서 내가 작성하는 것이 내 마음에서 발생 (this.a = 4)와 같은 변수는 잘 작동하고 document.a를 작성하면 this.name이나 등의 객체를 만들 때 document.a 등을 만들지 않아도됩니다. 그게 나 혼란 스럽니?

Q2)는 유사 나는

if(document.addEventListener){ 
 
    document.getElementById('pink').addEventListener('click', function(){ 
 
     alert("Clicked on pink"); 
 
    },false); 
 
} else{ 
 
    document.getElementById('pink').attachEvent('onclick', function(){ 
 
     alert("older Clicked on pink"); 
 
    }); 
 
}

또는

if(window.addEventListener){ 
 
    document.getElementById('pink').addEventListener('click', function(){ 
 
     alert("Clicked on pink"); 
 
    },false); 
 
} else{ 
 
    document.getElementById('pink').attachEvent('onclick', function(){ 
 
     alert("older Clicked on pink"); 
 
    }); 
 
}

모두 그게 전부를 작업하는 동안도 나를 만드는 코드를 작성 창과 문서가 두 가지 다른 점을 혼동하지만 여전히 addEventListener가 둘 다 작동합니까?

Answer 1

왜 우리는 document.name 등을 만들지 않아 혼란 스럽습니까?

코드 데이터가 저장되어있는 경우 유지 어려워진다 :

• 전역으로 그 개체가 전역 통해 액세스 특히 데이터 (의 비트가 특정한 관계가없는 개체에
속성으로

창 문서가 다른 두 가지

있습니다) 브라우저에 의해 제공

예

하지만 여전히하여 addEventListener 모두

이벤트 거품에서 일하고있다.

요소를 클릭하면 해당 요소에서 click 이벤트가 발생합니다.

그런 다음 해당 요소의 상위 노드에서 click 이벤트가 발생합니다. 그런 다음 해당 요소의 부모 노드 등입니다. 결국 DOM 상단으로 이동하여 document 개체와 window 개체를 찾습니다.

function listen(event) { 
 
    console.log("Event caught by handler attached to " + this + " from click on " + event.target); 
 
} 
 

 
addEventListener("click", listen); 
 
document.addEventListener("click", listen); 
 
document.querySelector("div").addEventListener("click", listen); 
 
document.querySelector("button").addEventListener("click", listen);

<div> 
 
    <button>Click me</button> 
 
</div>