Home » Tutorials » JavaScript » jQuery Events

jQuery Events

We can now utilize our JavaScript functions by referencing them as events in jQuery. A few of these events will save your life. Remember back when you used the HTML element attributes like onclick? Now, you can simply use the jQuery selectors that are listening the entire time the user is viewing the page. Listeners are useful so you are crowding your code with onclicks and other HTML action attributes. So, whenever you want to change an event, you can just go to your JavaScript code and not have to sift through your HTML.

Example
<button>Click Me!</button>
<ol>
    <li>
        Item 1
    </li>
    <li>
        Item 2
    </li>
</ol>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("button").click(function()
{
    $('ol li:first').hide();
});
</script>

As you can see, I select the ol, and then I select its first child li:first node. I Invoke the event hide, which basically sets the node’s style to invisible.

Events in jQuery are not limited to a single element. You can actually get fairly complicated passing in classes and names to have track events of any of the elements in that group. This is great practice as it is very dynamic and requires much less code than a ton of static JavaScript functions.

Common Events

  • $(document).ready(function) – starts when the selector has been loaded (document is the common selector)
  • $(selector).focus(function) – starts when the selector gains focus
  • $(selector).mouseover(function) – starts when the user hovers over the element
  • $("input").keypress(function) – starts when a key is pressed
  • $("input").keydown(function) – starts when a key is pressed down
  • $("input").keyup(function) – starts when a key is released
  • $(window).scroll(function) – starts when the user scrolls the selector (window is the common selector)

These are just a few of the important events, but please feel free to go jQuery’s tutorial on events to see the rest of the events I cannot overstate the importance of the events in jQuery. Use them to control when and how you want to start jQuery functions.



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "jQuery Events". After Hours Programming. Accessed on September 29, 2022. https://www.afterhoursprogramming.com/tutorial/javascript/jquery-events/.

  • Stewart, Suzy. "jQuery Events". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/jquery-events/. Accessed 29 September, 2022.

  • Stewart, Suzy. jQuery Events. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/jquery-events/.



Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.