jQuery "on" method with various event handlers

There are several ways to handle events on elements with jQuery’s “on” method. See the Javascript for examples.

  1. This method is the standard one event, one function method. On your .mybutton click, execute a function.
  2. This is a little more advanced. Capture two events and run the same function.
  3. Same as the previous example, this time we determine which event using e.type and handle that event separately.
  4. You can also chain the "on" method to handle different events with specific code.
  5. This time we're taking one selector and applying multiple unique handlers through one "on" method.

See the Pen jQuery "on" method with various event handlers by Pete (@peterbenoit) on CodePen.