Introduction: Event Types: Using Event functions
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
$(document).ready(function(){
XT1
});
</script>
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>
$(document).ready(function() {
XT1
});
</script>