JavaWeb-JS events

---

1. Brief description of JS events

Events , such as: click, form submission, etc.;
through JS events, complete the specified special effects of the page;

Two, JS event-driven mechanism

JS event-driven mechanism :

• Event source ;
  components that specifically generate events;
• Event ;
  an action or thing generated by an event source;
• Listener ;
  specializes in processing events generated by the event source;
• Register/bind the listener ;
  let the listener monitor the event source at any time whether a specified event occurs, if the event source generates a specified event, call the listener to process;

Three, common JS events

1. Click event (onclick)

• Click event: triggered when the mouse or hotkey clicks on the element component;
  

2. Focus event

• Get focus event (onfocus)
  focus: the attention of the entire interface; a page has only one focus
  

• Loss of focus event (onblur)
  

3. Domain content change event (onchange)

• Triggered when the value of the element component changes;
  

4. Load finished event (onload)

• Triggered when the element component is loaded;
  

5. Form submission event (onsubmit)

• Triggered when the submit button of the form is clicked ;
• Mainly used for form verification;
• This event can also control the submission of the form; this event needs to return a boolean value to perform the operation of submitting/blocking the form data;
  true means allowing form submission; false means organizing form submission;
  

6. The key up event (onkeyup)

• When inputting some content in the component, the event is triggered when the keyboard key is up;
  

7. Common mouse events

• Mouse over event (onmouseover)
  is triggered when the mouse moves into an element component;
  
• Mouse out event (onmouseout)
  

Four, JS event binding method

1. Element event handler binding

• Write the event into the tag as an element attribute, and then bind the corresponding function;
  
  
• Bind multiple events (the binding order is the execution order)
  
• 
  Advantages and disadvantages of event handle binding : Advantages: fast development; convenient parameter transfer; multiple functions can be bound;
  disadvantages: JS and HTML codes are highly soft together, which is not conducive to multi-departmental project development and maintenance;

2. DOM binding method (the most commonly used method at present)

• The advantages and disadvantages of the DOM binding method :
  advantages: completely separate HTML code and JS code;
  disadvantages: no parameters can be passed; only one function can be bound to an event; (both disadvantages can be solved by anonymous internal functions)