.on() replaces the functionality of all the event methods.

 
<html> 
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
        <script> 
            $(function(){ 
                $("#aDiv").on('click', function(){ 
                    document.writeln("Handler 1"); 
                });
        
                $("#aDiv").on('click', function(){ 
                    document.writeln("Handler 2"); 
                }); 
            }); 
        </script> 
    </head> 
    <body> 
        <div id="aDiv" class="boxDiv">Press Me 
        </div>
    </body> 
</html>

Click to view the demo

To use .on() like delegate() or .live(), add a second, optional selector argument representing the target element for the event.

 
<html> 
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
        <script>
            $(function(){ 
                $(document).on("click", "#anchor", function(event){
                    document.writeln("I have a handler"); 
                });
        
        
                $("body").append("<a id='anchor'> I go no where </a>") 
            });
    
        </script> 
    </head> 
    <body> 
    </body> 
</html>

Click to view the demo

To bind events to generic elements across the whole page, you use .on() on the document and pass in your generic p or aselector.

 
<html> 
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
        <script> 
            $(function(){ 
                $("#delegate").on("click", "p" , function(){ 
                    document.writeln('ouch'); 
                }).css("color", "green"); 
            });
        </script> 
    </head> 
    <body>
        <div id="delegate"> 
            <p>Hit Me!</p> 
        </div> 
    </body> 
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Event: