title: Include child elements on click event listener on dynamically created elements
body: <p><a href="https://jsfiddle.net/y444stqv/3/" rel="nofollow noreferrer">https://jsfiddle.net/y444stqv/3/</a></p>
  
  <p>How do I include all the child elements within the parent "click" event listener? For example, I dynamically create the following html:</p>
  
  <pre><code>  &lt;div id="content"&gt;
       &lt;div id="donotexecuteclicklistener"&gt;But don't include me!&lt;/div&gt;
        &lt;!-- Dynamically generated --&gt;
        &lt;div class="items"&gt;
          &lt;div class="item item-0"&gt;
            &lt;h3&gt;Item 0&lt;/h3&gt;
            &lt;p&gt;Some desc&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="item item-1"&gt;
            &lt;h3&gt;Item 1&lt;/h3&gt;
            &lt;p&gt;Some desc&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="item item-2"&gt;
            &lt;h3&gt;Item 2&lt;/h3&gt;
            &lt;p&gt;Some desc&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="item item-3"&gt;
            &lt;h3&gt;Item 3&lt;/h3&gt;
            &lt;p&gt;Some desc&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I want to bind a click handler to each "item" div. So, if you click any element that is a child of the "item" (i.e. the child "h3" or "p" tags) node, I still want to execute the "handleClick" click handler. BUT, when you click on the id "donotexecuteclicklistener", I don't want that click handler to trigger.</p>
  
  <pre><code>  var items = [];
    var $content = document.getElementById('content');
  
    for (var i = 0; i &lt; 4; i++) {
       // using ES6 template literals for ease
       var item = `
          &lt;div class="item" id="item-${i}"&gt;
              &lt;h3&gt;Item ${i}&lt;/h3&gt;
              &lt;p&gt;Some desc about item ${i}&lt;/p&gt;
          &lt;/div&gt;
       `;
  
       items.push(item);
    }
  
    var html = items.join(' ');
    $content.innerHTML = html;
  
    var handleClick = function(event) {
        console.log('do something with item', this, event);
    }
  
    $content.addEventListener('click', function(event) {
        console.log(event.target.id);
        var elements = $content.querySelectorAll('.item');
        var hasMatch = Array.prototype.indexOf.call(elements, event.target) &gt;= 0;
        console.log(hasMatch);
  
        if (hasMatch) {
          handleClick.call(event.target, event);
        }
    })
  </code></pre>