Make My Website Better
mobile menu open icon mobile menu close icon
Contact Us Get a Quote

How to Effectively use jQuery Events

Updated March 13, 2022
~ minute read
How to Effectively use jQuery Events

Content Key

Share this Post :
Get the most out of your marketing
Join over 100,000 of the most intelligent marketers in the universe, and receive marketing news and insights straight to your inbox.
Enter Email to Get Started:
(We will never share your information.)

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.

 

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.

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.

Leave a Reply

More Great Posts

Advertise with us
Join our advertising network to grow your business. Give us a call at (702) 904-4262
34.99 WordPress Updates | WordPress Support by 702 Pros
Sponsored
Build your Rank Ad 1 - RankLabel
Sponsored
Kyla Sloan | Kyla Estes | Client Management | Reception | Sales
Advertising with Us
Kyla SloanAdvertising Specialist
Our team has the digital and traditional marketing skills to get you in front of customers looking for your product or service.
Want to talk now? Give us a call at (702) 904-4262

Powered by OnSago

Add Your Business To the 702 Pros' Directory
Please add some general information about your business.
Want to talk now? Give us a call at (702) 904-4262

Powered by OnSago

2022 Sale

Get 20% off!

All Web Design Packages
Days
Hours
Minutes
Seconds
Want to talk now? Give us a call at (702) 904-4262

Powered by OnSago