Play with events

Just a page that alert's you to some events.

by bjelline

HTML

<div class="output">what's happening?
</div>
<div>
    <input type="button" id="left_button" value="click me">
    <input type="button" id="right_button" value="move the mouse over me">
</div>
<div class="badge_holder" id="bh1">

<img alt="First Lesson" src="http://cdn.codecademy.com/assets/badges/FirstLessonAchievement-d6f60dce83fd230140606858fa229197.png">

</div>

<div class="badge_holder" id="bh2">
    
<img alt="10 Exercises" src="http://cdn.codecademy.com/assets/badges/Exercises10Achievement-8fe065bfa15675895bf4a12247bb84f4.png">
    
</div>

<div class="badge_holder" id="bh3">
    
<img alt="25 Exercises" src="http://cdn.codecademy.com/assets/badges/Exercises25Achievement-9334fe27052146b42c1c4bbf582739ab.png">
    
    </div>

CSS

.output{
    float:right;
    width: 200px;
    heigth: 200px;
    background-color: #ddd;
    border: 1px black solid;
    
}

JavaScript

$('#left_button').click(function() {
    $('.output').text("this event is called 'click'");
});
$('#right_button').mouseover(function() {
    $('.output').text("this event is called 'mouseover'");
});
$('#right_button').mouseout(function() {
    $('.output').text("this event is called 'mouseout'");
});



$('#bh1 img').click(function() {
    $('.output').text("this event is called 'click'");
});
$('#bh2 img').mouseover(function() {
    $('.output').text("this event is called 'mouseover'");
});
$('#bh2 img').mouseout(function() {
    $('.output').text("this event is called 'mouseout'");
});

$('#bh3 img').dblclick(function() {
    $('.output').text("this event is called 'dblclick'");
});