Article

Introduction: Event Types: Using Event functions

https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js
Copy to clipboard

Events are user actions while browsing a web page. Examples of events are clicking, mouse hovering, typing into a text box, dragging e.t.c. Jquery offers a way to detect events and execute custom code when any of these events happens. This process of detecting user interactions and responding to them with custom code is known as event handling. When an event is performed we say that the event has been fired.Mouse events - Mouse events are events that are executed by actions on the mouse.Document/Window Events - These events are associated with the web page as a whole.Form Events - Are events associated with form actions.Keyboard Events- Events associated with keyboard presses.Jquery provides a variety of functions to detect and respond to events. All event functions use another anonymous function inside them, to hold the code that defines the response to the event. For example, we might want to click a button that will pop up an alert with a message. Such code will look like this: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex1.js?actionable=true The on() method is a more universal replacement of event functions like click() or mouseover(). It lets you specify the event name and a function to respond to the event. The on() method can rewrite all examples show above in a much more flexible way. If you want to raise an alert when the button alert is clicked we can write: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex2.js?actionable=true

<script>
$(document).ready(function(){
  XT1
});
</script>
Copy to clipboard
Send to Live Demo

Live demo

<style>#alertButton{margin-bottom: 1rem;}</style><div id="minidivpage" class="example-live"><a id="alertButton" href="#" class="w-button">Button alert</a><div class="div-block-3"><a id="interactionButton" href="#" class="ix-btn w-button ">Webflow Interactions</a><h4 class="heading-4">Custom adjustable bar:</h4></div><div class="div-block-4"><div class="div-block-5"></div></div></div>

<script>    
$(document).ready(function() {
  XT1
});
</script>
<script>
  
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your browser is too small

Resize your browser to be at least 769px wide.