关于 javascript 个活动及其运作方式

Question

首先我在 HTML/CSS/Javascript 上很差，我只是想通过考试。我有以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice for exam</title>

<style>

.rectangle{
  width:100px;
  height:150px;
  border:1px solid red;
  display:inline-block;
  margin-left:10px;
}

</style>

<script>

window.onload=function(){

  for(var i=0;i<10;i++) {

    var div=document.createElement("div"); 
    document.body.appendChild(div);
    div.className="rectangle"; //div.classList.add("rectangle");
    div.innerHTML="divul " + (i+1);

  //  div.style.height="100px";
  //  alert(typeof(div.style.height));
    var initial= parseInt(window.getComputedStyle(div).height); 

    div.onclick=function(event){ //click div
      if(this.style.height!==""){
        var curent=parseInt(this.style.height);
         this.style.height= curent+10+'px';
       }
       else
      {
          this.style.height= initial + 10 + 'px';
      }
      event.stopPropagation(); 
    }
  }
  document.body.onclick=function(){ //click body
    var divuri=document.getElementsByClassName("rectangle");
    for(d of divuri) d.style.height=initial +'px';
  }
}
</script>

</head>
<body>

</body>
</html>

这将创建一个 html 页面，其中有 10 个矩形，如果您单击其中一个，它的高度将增加 10px；如果您单击其他任何地方，在 'body' 中，矩形将恢复到其初始大小。我的问题是，为什么有必要创建一个函数（事件）来增加 div 大小

div.onclick=function(event)
{ //click div
     if(this.style.height!==""){...

而不是将它们调整为初始大小

  document.body.onclick=function(){ //click body
    var divuri=document.getElementsByClassName("rectangle");
    for(d of divuri) d.style.height=initial +'px';
  }

有什么区别？而 event.stopPropagation()，它到底做了什么？代码是我老师给的（是public，她肯定可以分享），我不明白她为什么要那样做，为什么是正确的。

Answer 1

div.onclick=function(event)

用于点击创建的div，即矩形

这里是这段代码

 var div=document.createElement("div"); 
    document.body.appendChild(div);
    div.className="rectangle"; //div.classList.add("rectangle");
    div.innerHTML="divul " + (i+1);

而这行代码

document.body.onclick=function()

点击页面主体的任意位置时触发，执行其中的代码行将大小重置为初始值

至于

event.stopPropagation()

Event 接口的stopPropagation() 方法阻止了当前事件在捕获和冒泡阶段的进一步传播。但是，它不会阻止任何默认行为的发生；例如，仍然处理对链接的点击。这可以防止执行任何父事件处理程序。

Answer 2

亲自尝试一下。运行它被 stopPropagation 注释掉，看看它如何影响结果。

window.onload=function(){

  for(var i=0;i<10;i++) {

    var div=document.createElement("div"); 
    document.body.appendChild(div);
    div.className="rectangle"; //div.classList.add("rectangle");
    div.innerHTML="divul " + (i+1);

  //  div.style.height="100px";
  //  alert(typeof(div.style.height));
    var initial= parseInt(window.getComputedStyle(div).height); 

    div.onclick=function(event){ //click div
      if(this.style.height!==""){
        var curent=parseInt(this.style.height);
         this.style.height= curent+10+'px';
       }
       else
      {
          this.style.height= initial + 10 + 'px';
      }
      console.log("clicked rectangle")
      //event.stopPropagation(); 
    }
  }
  document.body.onclick=function(){ //click body
    var divuri=document.getElementsByClassName("rectangle");
    for(d of divuri) d.style.height=initial +'px';
    console.log("clicked body")
  }
}

.rectangle{
  width:100px;
  height:150px;
  border:1px solid red;
  display:inline-block;
  margin-left:10px;
}

Answer 3

Why was it necessary to create a function(event) for increasing the divs size ... and not for resizing them to the initial size?

我想这个问题的重点是event，至于调整到初始大小我们也有一个功能。区别在于第二个函数中缺少参数event。

这里有几点需要理解：

在事件发生时，event object 作为参数传递给实际的函数调用，无论该函数是否定义了参数。正如我们在第二个函数的代码中看到的那样：它没有在其 body/code 中使用事件 object。这就是为什么它没有在函数的参数列表中提到 event 的原因。它本来可以这样做的，但是为什么要在代码中添加它呢？
点击事件冒泡。也就是说：当一个元素被点击时，不仅该元素会收到点击事件；它的 parent 元素也会在那之后接收它，它的 grandparent 在 parent 接收它之后，......它的所有祖先元素都会接收事件，包括 body 元素，按照“向上”的顺序。
第一个函数使用 event object 有一个目的：调用 stopPropagation。这种传播是在前面的要点中描述的。如果不调用 stopPropagation，点击事件就会冒泡，到达 body 元素，点击事件会触发 second 函数，立即将方块缩小到初始大小！这将有效地取消我们想要实现的效果（增加矩形的大小）。为避免这种情况发生，调用 stopPropagation：现在将没有其他祖先（在层次结构中更高）接收此点击事件。

关于 javascript 个活动及其运作方式

About javascript events and how do they work

html

javascript

events