title: How is an event added to multiple elements with jquery selector?
body: <p>Suppose I have the following markup:  </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="one"&gt;&lt;/li&gt;
      &lt;li class="one"&gt;&lt;/li&gt;
      &lt;li class="one"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I add the folowing jquery to perfprm onclick function:  </p>
  
  <pre><code>$(".one").click(function(){
          var text = this.innerHTML;
          alert(text);
  
      })
  </code></pre>
  
  <p>The click function is assigned to all the three <code>li</code> elements. Usualy in javascript <code>document.getElementsByClassName("one").myprop</code> would return the first element with class name <code>one</code>'s property <code>myprop</code>. Similarly if I add an event listener to <code>document.getElementsByClassName("one")</code> the event will be attached to the first element with class name <code>one</code>. E.g.  </p>
  
  <pre><code>var one = document.getElementsByClassName("one");  
  one.addEventListener("click", function(){
    alert();
  });
  </code></pre>
  
  <p>will cause alert poup to appear when first <code>li</code> element is clicked.</p>
  
  <p>Similarly jquery should assign the function to only the first element with class name <code>one</code>.</p>
  
  <p>So how does jquery assign a function to all the elements with class name <code>one</code>?</p>