How to Effectively use jQuery Events

When it comes to using jQuery one of the most powerful tools is its Events. With the use of events, you are able to manipulate the DOM depending on how the user interacts with the browser. This can be used effectively to increase user experience and or create useful features for a website. In this article,  you learn how to effectively use jQuery events and offer some examples of how you can use certain events.

jQuery .click() Event

The .click() The event is pretty self-explanatory. This method is set to execute on the action that a user clicks something on the DOM. with this event you can set if an element or set of elements is clicked on the DOM, to execute a JavaScript action.

//When paragraph tag is clicked
$("p").click(function() {
    //Execute Actions
    console.log("You clicked the paragraph");
}

With the jQuery Selector, you are able to select what element on the DOM is tied to the event. You can choose a class, id, or element tag such as the paragraph tag we just used. For more information on jQuery, Selectors click here.

ADs

Simple Calculator Example:

For more practical use let’s quickly create a calculator that adds two numbers together.

With the HTML I created a simple form that is going to take the input of the 2 numbers.

HTML
<form>
    <label for="num_one">First Number</label>
    <input  type="number" name="num_one"  id="num_one" required/>

     <label for="num_two">Last Number</label>
    <input type="number" name="num_two" id="num_two" required/>
    <input type="submit" value="submit" name="submit" id="submit-btn">
</form>

With the JavaScript, we are simply going to target the submit button and bind a "click" event an execute the code to add the numbers and print them out.
JavaScript/jQuery
<script>
    $("#submit-btn").click(function() { 
        //Get Number of two values
       var num_one = document.getElmentByID("num_one").value; 
       var num_two = document.getElmentByID("num_two").value; 
       var result = num_one + num_two;
       //Echo Result
        console.log(result);
     }
</script>

jQuery .change() Event

With the .change() event and action are triggered when the value of an element has changed. This only works on <input>, <textarea> and <select> tags. So these will be very useful for any kind of form submission that may have things like radio buttons, select boxes, etc.

//When paragraph tag is clicked 
$("input").change(function() { 
     //Execute Actions 
    console.log("You clicked the paragraph"); 
}

Binding Multiple Events to an Elements

On top of being able to attach certain events to elements from the DOM, you are also able to bind multiple events to an element. To do this we utilize the .on() method. With this event method, you can bind multiple events to a single or group of elements.

ADs

For example, if you want to track any user’s interaction with the dom, you can bind all the jQuery events and fire an action to notify you of any kind of interaction on the DOM.

$('body').on('click change keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Conclusion

In conclusion, jQuery events are extremely powerful for setting actions upon a user’s interaction with the DOM. By now you should know how to effectively use jQuery events to create some cool little pieces of software and hopefully this information sticks with you throughout your programming journey to create some awesome and innovative software. Feel free to check out some of my other articles, such as my WordPress Database Optimization article.