Events

User interactions with a web page are called events.

For example, when you click the Like button to the right, the browser announces that a click event has occurred.

Event Handlers

var main = function() {
  $(".like-button").click(function() {
    $(this).toggleClass("active");
  });
};

$(document).ready(main);
  • .click()

    $('.social li').click(function() {
      $(this).toggleClass('active');
    });
    
  • Try it out

    Fill in the event handler below to apply the class "btn-like" to the $(".btn") element. Use .toggleClass() to apply the class. Use this to operate on the already-selected HTML element.

    
    

    .keypress()

    $(document).keypress(function() {
      $('.dropdown-menu').toggle();
    });
    
  • Try it out

    Fill in the event handler below to apply the class "btn-like" to the $(".btn") element when a key is pressed. Use $(".btn") to select the Like button. Use .toggleClass() to apply the class "btn-like".

    
    

    event

    $(document).keypress(function(event) {
      if(event.which === 109) {
        $('.dropdown-menu').toggle();
      }
    });
    
  • Try it out

    Fill in the event handler below to apply the class "btn-like" to the $(".btn") element when the g key is pressed. Check if the g key is clicked using the key code 103. Use $(".btn") to select the Like button. Use .toggleClass() to apply the class "btn-like".

    
    
  • ?