20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  | 
    
    
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>on demo</title>  <style>  p {    color: red;  }  span {    color: blue;  }  </style>  <script src="https://code.jquery.com/jquery-3.7.0.js"></script></head><body> <p>Has an attached custom event.</p><button>Trigger custom event</button><span style="display:none;"></span> <script>$( "p" ).on( "myCustomEvent", function( event, myName ) {  $( this ).text( myName + ", hi there!" );  $( "span" )    .stop()    .css( "opacity", 1 )    .text( "myName = " + myName )    .fadeIn( 30 )    .fadeOut( 1000 );});$( "button" ).click(function () {  $( "p" ).trigger( "myCustomEvent", [ "John" ] );});</script> </body></html>  
  
---|---  
  
####  Demo:

Attach multiple event handlers simultaneously using a plain object.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  | 
    
    
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>on demo</title>  <style>  .test {    color: #000;    padding: .5em;    border: 1px solid #444;  }  .active {    color: #900;  }  .inside {    background-color: aqua;  }  </style>  <script src="https://code.jquery.com/jquery-3.7.0.js"></script></head><body> <div class="test">test div</div> <script>$( "div.test" ).on({  click: function() {    $( this ).toggleClass( "active" );  }, mouseenter: function() {    $( this ).addClass( "inside" );  }, mouseleave: function() {    $( this ).removeClass( "inside" );  }});</script> </body></html>  
  
---|---  
  
####  Demo:

Click any paragraph to add another after it. Note that ` .on() ` allows a
click event on any paragraph--even new ones--since the event is handled by the
ever-present body element after it bubbles to there.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  | 
    
    
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>on demo</title>  <style>  p {    background: yellow;    font-weight: bold;    cursor: pointer;    padding: 5px;  }  p.over {    background: #ccc;  }  span {    color: red;  }  </style>  <script src="https://code.jquery.com/jquery-3.7.0.js"></script></head><body> <p>Click me!</p><span></span> <script>var count = 0;$( "body" ).on( "click", "p", function() {  $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );});</script> </body></html>  
  
---|---  
  
####  Demo:

Display each paragraph's text in an alert box whenever it is clicked:

1  2  3  | 
    
    
    $( "body" ).on( "click", "p", function() {  alert( $( this ).text() );});  
  
---|---  
  
Cancel a link's default action using the ` .preventDefault() ` method:

1  2  3  | 
    
    
    $( "body" ).on( "click", "a", function( event ) {  event.preventDefault();});  
  
---|---  
  
Attach multiple events—one on ` mouseenter ` and one on ` mouseleave ` to the
same element:

1  2  3  | 
    
    
    $( "#cart" ).on( "mouseenter mouseleave", function( event ) {  $( this ).toggleClass( "active" );});  
  
---|---  
  
  * [ Ajax ](https://api.jquery.com/category/ajax/)
    * [ Global Ajax Event Handlers ](https://api.jquery.com/category/ajax/global-ajax-event-handlers/)
    * [ Helper Functions ](https://api.jquery.com/category/ajax/helper-functions/)
    * [ Low-Level Interface ](https://api.jquery.com/category/ajax/low-level-interface/)
    * [ Shorthand Methods ](https://api.jquery.com/category/ajax/shorthand-methods/)
  * [ Attributes ](https://api.jquery.com/category/attributes/)
  * [ Callbacks Object ](https://api.jquery.com/category/callbacks-object/)
  * [ Core ](https://api.jquery.com/category/core/)
  * [ CSS ](https://api.jquery.com/category/css/)
  * [ Data ](https://api.jquery.com/category/data/)
  * [ Deferred Object ](https://api.jquery.com/category/deferred-object/)
  * [ Depreca