对此感到困惑并在Javascript中记录对象答案

【问题标题】：Confusion in this and document Object in Javascript对此感到困惑并在Javascript中记录对象
【发布时间】：2017-01-18 15:08:51
【问题描述】：

实际上，这些天我正在学习 javascript 事件，但在这期间我做了一些编码，然后我想到了一个问题

Q1）当我创建函数时，我写变量（this.a = 4）而不是控制台它工作正常，然后我写 document.a 它也工作正常，所以当我们创建像 this.name 等对象时那么为什么我们不创建像 document.name 之类的东西，这让我很困惑？

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 仍然在两者中工作？

【问题讨论】：

标签： javascript window this document

【解决方案1】：

为什么我们不创建像 document.name 之类的东西。这让我很困惑？

如果存储数据，代码会变得更难维护：

作为全局变量
作为与该数据位没有特定关联的对象的属性（尤其是那些通过浏览器提供的全局变量访问的对象）

窗口和文档是两个不同的东西

是的

但 addEventListener 仍然在两者中工作

事件气泡。

您单击一个元素，然后在该元素上触发一个单击事件。

然后在该元素的父节点上触发单击事件。然后是该元素的父节点，依此类推。最终它到达 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>

【讨论】：