Question

实际上我这几天正在学习javascript活动但是在我之间做了一些编码而且我脑子里出现的问题是

Q1）当我创建函数并且在那里我写变量如（this.a = 4）而不是控制台它工作正常然后我写document.a它也工作正常所以当我们创建像this.name等对象那么为什么我们不创建像document.name等那样让我感到困惑的东西？

Q2）同样我写了一个代码

＆＃13;

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"); 
  });
}

＆＃13;

或

＆＃13;

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"); 
  });
}

＆＃13;

虽然两者都在工作，这也让我混淆窗口和文档是两个不同的东西，但仍然addEventListener在两个工作？

Answer 1

为什么我们不创建像document.name等那些令我困惑的东西？

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

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

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

是

但仍然有addEventListener正在使用

活动泡沫。

单击某个元素，会在该元素上触发click事件。

然后在该元素的父节点上触发click事件。然后是该元素的父节点，依此类推。最终它会到达DOM的顶部，然后点击document对象，然后点击window对象。

＆＃13;

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);

＆＃13;

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

＆＃13;

混淆在这和Javascript中的文档对象

1 个答案: