Home » jQuery » jQuery – Events

jQuery – Events

As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if you want to simulate the clicking of a button.

Of course, if you are going to fire an event, you’ll probably need some sort of event listener setup to handle that.

We will address firing events first since it has the least amount of code needed.

All you need to do is select the element or elements using the selectors we’ve already discussed and then call the method trigger(‘eventname’).

So, to click a button, your code might look something like this:


Since the click method is so common, jQuery has a shortcut method, click(), that does the same thing, so we can rewrite our code as:


But if we click a button, we probably want some JavaScript to execute because of it.  This is where jQuery makes life much easier for the JavaScript programmer.

If you are familiar with JavaScript you are probably most familiar with attaching code to your HTML elements by using the on____ attributes.  To attach a method to the click event of the anchor tag you might write something like:

<a href="#" onclick="method();" >text</a>

If you were particularly clever, you might do some sort of event binding using code:

document.getElementById('anchorId').onclick = functionName;

But even doing that we are left with the ugly potential of having already assigned a function to the element, in which case this code would overwrite it.

In fact, if you’ve been coding JavaScript for a while, you are probably quite familiar with the problem of needing to add an event handler to the onload event of the document only to find out that doing so wiped out some critical JavaScript code that was already assigned to that event.

You’ll be happy to know that assigning code to an event in jQuery is both simple and non-destructive.

{ //code goes here

This code would normally be placed inside the ready handler that you’ve seen in previous posts so that your code would ultimately look something like this:

$(function() {
    $('#anchorId').bind('click', function()
    { //code goes here

And since the click event is so common, we can replace bind(‘click’,function…) with click(function()….)

$(function() {
    $('#anchorId').click( function()
    { //code goes here

And if someone decides to attach another method to the same click event, both methods will run.


Other post in jQuery

Related Post

  • jQuery Expand/Collapse Using Head TagsjQuery Expand/Collapse Using Head Tags I’ve spent a good chunk of the last two days working on an interesting project for one of my clients that I think the rest of the jQuery community could benefit from. The task started […]
  • jQuery ProgressbarjQuery Progressbar Once you venture into the land of AJAX you’ll soon discover the need to let your user know that some work is taking place in the background.  If you can, you’ll want to let them know […]
  • jQuery, Each() and Async GetsjQuery, Each() and Async Gets One of the things to keep in mind when using jQuery is that nothing is a blocking call.  Sure, there is a certain sequence to when things operate.  But, to be safe, you should […]
  • jQuery – Using Slider as a ScrollbarjQuery – Using Slider as a Scrollbar Last week I introduced the jQuery UI element known as a slider and indicated that this control could easily be used as a custom scrollbar. Today I'm going to show you exactly how […]
  • JavaScript bind() for cleaner codeJavaScript bind() for cleaner code Several weeks ago, I wrote about how closures impact calling asynchronous functions in a loop and several ways of dealing with that problem. In my recent coding, I’ve discovered an even […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS. Does your team need additional help in any of the above? Contact Dave today.

3 Pingbacks/Trackbacks