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) {
  	console.log('target: ', event.target); //use event.target to gain access to target of the event which is the td 
  	console.log('currentTarget: ', event.currentTarget); //use event.currentTarget to gain access to the element on which the listener is registered. 
}, false);