title: HTML events pop up in same time, how to just pick one
body: <p>I make a page write like this:</p>
  <pre><code>&lt;div id=“listener”&gt;
     &lt;ul id=&quot;top&quot;&gt;
      &lt;li id=&quot;li-QD&quot;&gt;
        &lt;input id=&quot;inV-QD&quot; type=&quot;checkbox&quot;&gt;
        &lt;label&gt;
          &lt;input id=&quot;inC-QD&quot; data-coor=&quot;3&quot; data-level=&quot;0&quot; data-order=&quot;0&quot; data-parent=&quot;top&quot; type=&quot;checkbox&quot;&gt;
          &lt;span&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label for=&quot;inV-QD&quot;&gt;QD&lt;/label&gt;
            &lt;ul id=&quot;ul-QD&quot;&gt;
               &lt;li id=&quot;li-southPart&quot;&gt;
                  &lt;input id=&quot;inV-southPart&quot; type=&quot;checkbox&quot;&gt;
                  &lt;label&gt;
                  &lt;input id=&quot;inC-southPart&quot; data-coor=&quot;0&quot; data-level=&quot;1&quot; data-order=&quot;0&quot; data-parent=&quot;QD&quot; type=&quot;checkbox&quot;&gt;
                  &lt;span&gt;&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;label for=&quot;inV-southPart&quot;&gt;southPart&lt;/label&gt;            
               &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is a list added dynamic.
  And I add event listener to “div” at top, so whenever I click one input,I will find out who was clicked by using “even.target”, getting target-name.</p>
  <p>Now, because I'm using “span”, so when I clicked, two events will pop up. I thought I will tell two events by using <code>event[0],event[1</code>], but it turns out the event is an object. (The “event” is eventlistener binding function’s parameter function(event) ). I can’t treat it as array.</p>
  <pre><code>function bodyIni(){
  let httpRequest;
  httpRequest = new XMLHttpRequest();
  const url = &quot;http://localhost/mapMonitor/areaIni.php&quot;;
  httpRequest.onreadystatechange = alertContents;
  
  httpRequest.open(&quot;GET&quot;,url,true);
  httpRequest.send();
  
  function alertContents(){
      if(httpRequest.readyState === XMLHttpRequest.DONE){
          if(httpRequest.status ===200){
              //alert(httpRequest.responseText);Add innetHTML
              document.getElementById(&quot;dym-List&quot;).innerHTML=httpRequest.responseText;
              //stopPropagation &lt;span&gt; $$ &lt;label[for]&gt;
              const spans = document.querySelectorAll(&quot;#listener span&quot;)
              for(let index=0;index&lt;spans.length; index++){
                  spans[index].addEventListener(&quot;click&quot;,function(e){e.stopPropagation();},false);
              }
  
              const labelFors = document.querySelectorAll(&quot;#listener label[for]&quot;)
              for( index=0;index&lt;labelFors.length; index++){
                  labelFors[index].addEventListener(&quot;click&quot;,function(e){e.stopPropagation();},false);
              }
          }
          else{
              alert(&quot;this is the wrong part.&quot;);
          }
      }
  }//End of Dym-adding part
  
  // add listener to &quot;#dym-List&quot;list
  const list = document.getElementById(&quot;listener&quot;);
  list.addEventListener(&quot;click&quot;,getElementUsingId,false);
  }
  </code></pre>
  <p>And I using this function pick up the input checkbox.</p>
  <pre><code>    function getElementUsingId(event){
          let tarname = event.target;
          let nameId = tarname.id;
          let index = nameId.indexOf(&quot;-&quot;)+1;
          //get the district Name
          let name = nameId.substring(index);
          //store select name.
          selectName = name;
          //get the name ,with prefix, we can call associate functions;
          const liNameID = &quot;#li-&quot;+name;
          uncheckAllBox();
          checkAllChildBox(liNameID);
          const inCName = &quot;inC-&quot;+name;
          showArea(inCName);
          //showMap(name);
      }
  </code></pre>
  <p>My way is using <code>document.querySelect()</code> find all the spans, and using <code>event.stopPropagation()</code> to every span. I think that is no good.</p>
  <p>You can see in the last function, if I don’t stop “span” and <code>label[for]</code>, I will get two events at same time. And <code>event.target</code> will give two outputs, which is two objects, not in one array .So can I separate two events by using an array-like way?</p>