DOM Enlightenment Book

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<p>Click a table cell</p>

<table border="1">
    <tbody>
        <tr><td>row 1 column 1</td><td>row 1 column 2</td></tr>
        <tr><td>row 2 column 1</td><td>row 2 column 2</td></tr>
        <tr><td>row 3 column 1</td><td>row 3 column 2</td></tr>
        <tr><td>row 4 column 1</td><td>row 4 column 2</td></tr>
        <tr><td>row 5 column 1</td><td>row 5 column 2</td></tr>
        <tr><td>row 6 column 1</td><td>row 6 column 2</td></tr>
    </tbody>
</table>





























<h4 style="border-top:1px solid #ADADAD;padding-top:20px;margin-top:20px;"><strong>&larr; Code Example from <a href="http://www.domenlightenment.com/" target="_blank">DOM Enlightenment Book</a> by <a href="http://www.codylindley.com" target="_blank">Cody Lindley</a></strong></h4>

<p style="background-color:#fff">JavaScript code is executed on page load. Click the "Run" button in the top bar to re-run the JavaScript code. All <code>console.log()'s</code> are logged to the <a href="http://getfirebug.com/firebuglite" target="_blank">Firebug Lite</a> console below &darr;.</p>

JavaScript

document.querySelector('table').addEventListener('click', function(event) {
    if (event.target.tagName.toLowerCase() === 'tr') { //make sure we only run code if a td is the target
        console.log(event.target.textContent); //use event.target to gain access to target of the event which is the td 
    }
}, false);