title: How to capture event on specified node only?
body: <p>I have a markup like this:</p>
  
  <pre><code>&lt;div id="largeField"&gt;
      &lt;div class="small"&gt;&lt;/div&gt;
      ......
      &lt;div class="small"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I try to catch <code>mousemove</code> on <code>#largeField</code> (in vanilla js, but that's not a requirement) with a code like this:</p>
  
  <pre><code>largeField.addEventListener('mousemove', function(event) {
      var elementData = event.srcElement.getBoundingClientRect();
      var eventX = event.pageX - elementData.left;
  
      // I just want to get event coordinates to draw something below the mouse
  
      event.stopPropagation();
      event.preventBubble = true;
      return false;
  });
  </code></pre>
  
  <h2><a href="http://jsfiddle.net/cTrc4/" rel="nofollow">Fiddle</a></h2>
  
  <p>The problem is that I don't always get event catched on <code>#largeField</code>, but on other <code>small</code> elements too. </p>
  
  <p>I don't want to filter on <code>event.srcElement</code> inside the callback, because when there will be 1000 of <code>small</code> elements, performance would bite.</p>
  
  <p>I'm asking of the right way. I want the callback to be fired only on <code>#largeField</code>. I have asked that in the code! </p>