jQuery events

1. Concept

The page's responses to different visitors are called events.
Event handlers are methods that are called when certain events occur in HTML.
Example:
Move the mouse over the element
select radio button
click element

1. What is an event

2. Basic grammar

$( " Selector " ).EventName();

1. Event syntax

$( " Selector " ).EventName(function(){

Code to be executed after the action starts

});

2. Event function

$(docuent).ready(function(){

Code to be executed after the action starts

What this statement does is wait for the document to fully load to run the jQuery code

});

Shorthand: $(function()){

});

3. Fully document event functions

3. Event method

(1 ) event binding on() binding event one() binding event (triggering an event)
( 2 ) remove the binding event off() remove the event
Syntax: $( " selector " ).method( " event method " ,function(){
});

1. Bind or delete events

(1 ) mousedown() mouse over the element, press to trigger

( 2 ) mouseup() mouse over the element, press and release to trigger

( 3 ) mouseenter() is triggered when the mouse moves over the element (only the current element)

( 4 ) mouseleave() is triggered after the mouse moves to the element and leaves (only the current element)

( 5 ) mousemove() is triggered when the mouse moves on the element

( 6 ) mouseout() is triggered after the mouse moves to the element and leaves (including the current element and child elements)

( 7 ) mouseover() triggers when the mouse moves to the element (including the current element and child elements)

( 8 ) Fired when an element is clicked

( 9 ) dblclick fires when an element is double-clicked

( 10)hover() is triggered when the mouse is hovered

2. Mouse events

(1 ) Triggered when the keydown() key is pressed

( 2 ) keypress() key is pressed to trigger

( 3) keyup() key is released to trigger

3. Keyboard events

(1 ) submit() is triggered when the form is submitted

( 2 ) change() is triggered when the element value changes

( 3 ) focus() gets the focus trigger

( 4) blur() loses focus trigger

4. Form Events

(1 ) resize() is triggered when the browser window is resized

( 2 ) scroll() is triggered when the specified element is scrolled

( 3) select() triggers when the input element is selected

5. Document/Window Events

4. Delegate events (similar to inheritance)

Event delegation is based on the principle of event bubbling, using the parent tag to capture the event of the child tag

$( " table " ).on( " click " , " .delete " , function () {
   // delete the event bound to the button
})

Delegated event example

The principle of event bubbling will deliver events step by step