jQuery Event Handling

by anandhinava

HTML

<h1>jQuery Events</h1>

<button class="addp">Add new paragraph</button>
<button class="clearp">Clear P events</button>
<button class="clearb">Clear namespace B events</button>
<input type="text" placeholder="type something"></input>

<p class="draggable">Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<div>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</div>

JavaScript

$(function () {

    $("p").one("click", function () {
        console.log("You clicked this p for the first time!");
        $(this).click(function () {
            console.log("You clicked this p before!");
        });
    });

    $("div").on("mouseenter mouseleave", function () {
        console.log("mouse entered or left a div");
    }).on('click.namespaceA', function() {
        console.log("click on div for namespace A");
    }).on('click.namespaceB', function() {
        console.log("click on div for namespace B");
    });

    $("h1").on({
        mouseenter: function () {
            console.log("hovered over a h1");
        },
        mouseleave: function () {
            console.log("mouse left a h1");
        },
        click: function () {
            console.log("clicked on a h1");
        }
    });
    
    $(document).on('elementadded', function(e, el) {
        console.log('new element added: ', el);
    });
    
    $('body').on('drag', 'p.draggable', function() {
        console.log('p text is being dragged');
    });
    
    $('input[type=text]').keydown(function(e) {
        console.log("you pressed the %d key", e.which);
        $(this).val('');
    });
    
    $("button.addp").click(function() {
        
        var $p = $('<p/>', {
            html: 'new paragraph',
            class: 'draggable'
        });
        
        $('body').append($p);                    
        $(document).trigger('elementadded', [$p]);
        
    });
    
    $("button.clearp").click(function() {
        $('p').off();
    });
    
    $("button.clearb").click(function() {
        $('div').off(".namespaceB");
    });

});