DOM Enlightenment Book

by peroli

HTML

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

<table border="1" cellspacing="5">
    <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>

JavaScript

document.querySelector('table').addEventListener('click', function(event) {
    if (event.target.tagName.toLowerCase() === 'td') { //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 
    }
    else {
    		console.log(event.target);
    }
}, false);