PICKLE Button!

Showing Mallory some different binding methods. Should use this in the future to expand upon.

by cgspicer

HTML

<a href="#" class="button" id="pickle">Pickle Button</a>

CSS

body { display: block; width: 100%; position: relative; padding-top: 50px; }
a.button {
    display: block;
    position: relative;
    width: 150px;
    margin: 0 auto;
    border: 1px solid blue;
    padding: 5px;
    text-align: center;
    color: blue;
    text-transform: uppercase;
}
a.button:hover {
    background-color: blue;
    color: white;
}

JavaScript

$(document).ready( function() {
    
    //javascript version :
    //document.querySelector('#pickle').onclick = jsHandler;
    //it's actually faster to use getElementById though, (http://jsperf.com/getelementbyid-vs-queryselector/11)
    document.getElementById('pickle').onclick = jsHandler;
    
    //jquery version :
    $('#pickle').click( jQeuryHandler );
    
    function jsHandler( event ) {
        console.log( event.target );
    }
    
    function jQeuryHandler( event ) {
        console.log( event.target );
    }
    
});