jQuery Events

events, on method, preventDefault, stopPropagation, stopImmediatePropagation, custom events

by deshpandeakhil

HTML

<div id="div1">
    <a id="link1" href="http://www.google.com">Google</a><br/>
</div>    
<input type="checkbox" id="cb1" /> Prevent Default <br/>
<input type="checkbox" id="cb2" /> Stop Propagation <br/>
<input type="checkbox" id="cb3" /> Stop Immediate Propagation <br/>
<hr/>
<div>Custom Event Demo</div>
<input type="button" id="btnGreen" value="Turn traffic light green"/>
<input type="button" id="btnRed" value="Turn traffic light red"/>
<div id="output"></div>
<hr/>

CSS

#div1 { border: red 2px solid; width:150px; margin:2px; padding:2px;}
#div2 { border: blue 2px solid; margin:2px; padding:2px;}
#btnGreen {background-color:lightgreen; margin:2px; padding: 2px;}
#btnRed {background-color:pink; margin:2px; padding: 2px;}

JavaScript

// on method replaces bind, live and delegate
var link1 = $("#link1");
var f = function(e) {
    console.log("f clicked " + $(this).attr("id"));
    if ($("#cb1").attr("checked")) {
        // this will prevent default behavior of link which is to go to the href. If it is false, after executing the statements in this function, the browser will try to navigate to the web page.
        e.preventDefault();
    }
    if ($("#cb2").attr("checked")) {
        // this will stop propagating the bubbling of events to the parent, so div's click wont get called however another associated event on the same link will still get called
        e.stopPropagation();
    }
    if ($("#cb3").attr("checked")) {
        // this will stop propagating the bubbling of events to the parent as well as to the same element, hence in this case neither the link's associated event will get called nor the div's
        e.stopImmediatePropagation();
    }
}
var f1 = function(e) {
    console.log("f1 clicked " + $(this).attr("id"));
}
//on method is new in jquery and replaces the bind, delegate and live methods    
link1.on("click", f);
link1.on("click", f1);
$("#div1").on("click", f);

//non existing events
var trafficLight = {};
var car = {
    lightTurnedGreen: function() {
        $("#output").append("Go Ahead..." + "<br/>");
    },
    lightTurnedRed: function() {
        $("#output").append("STOP!!!" + "<br/>");
    }
};
// traffic light has 2 custom events called green and red which are connected to car's lightTurnedGreen and lightTurnedRed methods
$(trafficLight).on("green", car.lightTurnedGreen);
$(trafficLight).on("red", car.lightTurnedRed);
$("#btnGreen").click(function() {
    // here we trigger the green event
    $(trafficLight).trigger("green");
});
$("#btnRed").click(function() {
    // here we trigger the red event
    $(trafficLight).trigger("red");
});