Event Methods

Author: MDBootstrap


With jQuery you can respond to events in an HTML page.


jQuery Events

What are websites events?

Every user of a website can perform actions that your web page should respond to.

These actions are called Events

An event express the moment of something happening on site.


For example, when you click on page's window. You can trigger event when you hover your mouse over element. When you type something on your keyboard you are also triggering an event.


Popular Events


Here is the list of most commonly used jQuery events:

  • .click() - Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

  • .hover() - Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

  • .toggle() - Bind two or more handlers to the matched elements, to be executed on alternate clicks.

  • .keydown() .keypress() .keyup() - Bind an event handler to the “keydown”, "keypress", "keyup" JavaScript event, or trigger that event on an element.

  • .scroll() - Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.

Note: 'handler' is an event argument that is usually a JavaScript function. You setup handler behaviour by calling a function.


Events Examples


.click() - event


      <p id="text1">Simple text that you can click</p>
    


      jQuery(document).ready(function(){

      $("#text1").click(function(){
      $(this).html('Updated text after click');
      });

      });

    

Live preview

Simple text that you can click


.hover() - event


      <p id="text2">Simple text that you can point with mouse</p>
    


      jQuery(document).ready(function(){

      $("#text2").hover(function(){
      $(this).html('Updated text when you hover your mose over it');
      });

      });

    

Live preview

Simple text that you can point with mouse


.toggle() - event

Note: toggle events accepts 2 handlers to trigger them for a change, but can simply toggle display of an element.


      <p class="sampleText">Simple text 1</p>
      <p class="sampleText text-danger" style="display: none">Simple text 2</p>
      <button id="toggleButton">Toggle button</button>
    


      jQuery(document).ready(function(){

      $("#toggleButton").click(function(){
      $('.sampleText').toggle();
      });

      });

    

Live preview

Simple text 1


.keydown() - event



      <form>
        <input id="target" type="text" value="Hello there">
      </form>
    


      jQuery(document).ready(function(){


      $( "#target" ).keydown(function() {
      alert( "Handler for .keydown() called." );
      });

      });

    

Live preview


.scroll() - event


      <p>Paragraph - <span id="scrollTest" class="text-danger" style="display: none;">Scroll happened!</span></p>

    


      jQuery(document).ready(function(){


      $( window ).scroll(function() {
      $( "#scrollTest" ).css( "display", "inline" ).fadeOut( "slow" );
      });

      });

    

Live preview

Paragraph -

Note: we used method .fadeOut() with atribute "slow" to make span invisible slowly after every scroll.


Congratulations!

You've come very far. More lessons of the jQuery tutorial will be published soon.

Subscribe to our list to make sure that you won't miss them.

Newsletter

Previous lesson

Spread the word:
Do you need help? Use our support forum

About the author