title: addEventListener to specified html table column event propagation/delegation
body: <p>I have a table with 10 columns and I want to add one or more event listeners to columns from 5th to 8th by using specifically <code>addEventListener</code> statement (so please no inline events like <code>element.onclick</code>).
  The table is dynamic, in fact I don't know at programming time how many records the table will have at runtime because it will be populated by data only at that moment.</p>
  
  <p>I already know how to "aim" to a table or to a table row or to a specified table cell to add event listeners to them but unfortunately I don't understand how to add them to certain columns or to a range of columns at once ("at once" means a for loop that loops through every row to get the desired cell of each).</p>
  
  <h2>Edit</h2>
  
  <p>The table is just a normal table like the following example and it is populated by loading data records from csv file or by adding new records by a form placed into the tfoot of the table itself. Also it is possible to edit the data into the table itself thanks to the <code>contenteditable</code> attribute added (or removed) dynamically by js when needed.</p>
  
  <p><strong>If I want to add an event listener to a row I first get the row object then I add the eventlistener to it once: all td elements will be affected as I need thanks to event propagation/delegation. Is that possible to do the same with columns?</strong></p>
  
  <pre><code>myRow.addEventListener(input, myfunc, false);
  </code></pre>
  
  <p>In other words is it possible to do something like:</p>
  
  <pre><code>myCol5.addEventListener(input, myfunc, false);
  myCol6.addEventListener(mouseover, myfunc, false);
  myCol7.addEventListener(click, myfunc, false);
  myCol8.addEventListener(input, myfunc, false);
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table, td, th
  {
    border: 1px solid black;
    border-collapse: collapse;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Company&lt;/th&gt;
      &lt;th&gt;Contact&lt;/th&gt;
      &lt;th&gt;Country&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
      &lt;td&gt;Maria Anders&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Centro comercial Moctezuma&lt;/td&gt;
      &lt;td&gt;Francisco Chang&lt;/td&gt;
      &lt;td&gt;Mexico&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Ernst Handel&lt;/td&gt;
      &lt;td&gt;Roland Mendel&lt;/td&gt;
      &lt;td&gt;Austria&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Island Trading&lt;/td&gt;
      &lt;td&gt;Helen Bennett&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;
      &lt;td&gt;Yoshi Tannamuri&lt;/td&gt;
      &lt;td&gt;Canada&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;
      &lt;td&gt;Giovanni Rovelli&lt;/td&gt;
      &lt;td&gt;Italy&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>