Event Bubbling

This is a quick test to show off how event bubbling works. Clicking the DIV will fire the DIV's event. Clicking the button will fire the button and DIV's event because of event bubbling.

HTML

<div id="eventBubblingTest">
    <input id="button" type="button" value="Button" onClick="event.stopPropagation()" />
</div>

CSS

div
{
    border:1px solid black; 
    position: absolute;
    width: 154px; 
    height: 122px; 
}

input
{
    position: relative; 
    top: 50px; 
    left: 50px;
}

JavaScript

$(function() {
    $('#eventBubblingTest').bind('click', function() {
        alert('I AM THE DIV');
    });
    $('#button').bind('click', function() {
        alert('I AM THE BUTTON');
    });
});