Deep understanding of jQuery event processing and deep understanding of jquery events

Deep understanding of jQuery event processing and deep understanding of jquery events

Browser event model

DOM level 0th event model

1. Event instance

This attribute provides a large amount of information about the currently being processed trigger events. This includes some details, such as the event triggered on which element, the coordinates of the mouse event, and the key clicked in the keyboard event.

2. Event bubbling

When an event on an element in the dom tree is triggered, the event model checks whether the element has created a specific event processor. If yes, the created event processor is called. Then, the event model checks the parent element of the target element to see if it has created a processor for this event type. If yes, call the created processor and check its parent element, parent element of the parent element, and so on until the top of the dom tree.

DOM level 2nd event model

IE event model

JQuery event model

Bind event processor with jQuery

Bind (eventType, data, handler); bind (eventMap)
You can add a suffix separated by dots to the event name to specify a namespace to operate event processors in batches.
You can bind multiple events to an element using a single bind () method.
$('.whatever').bind({  click:function(event){/* handle */},  mouseenter: function (event) {/* handle */ },  mouseleave: function (event) {/* handle */ }})
Binding specific events:
Blur change click dblclick error focus focusin focusout keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup ready resize scroll select submit unload
When you use these convenient methods, the event. data value is read-only. They have a listener function, indicating the event processor.
Focusin focusout
One (eventType, data, listener)
Delete event Processor
Unbind (eventType, listener); unbind (event)
Delete a specific event Processor
Delete all event processors in the namespace
$ ('*'). Unbind ('. fred') Event instance
JQuery. Event attributes and Methods independent of browsers


 
 
 
  
 
   
 
    
Name
 
    
Description
 
   
 
   
 
    
AltKey
 
    
 
   
 
   
 
    
CtrlKey
 
    
 
   
 
   
 
    
CurrentTarget
 
    
 
   
 
   
 
    
Data
 
    
 
   
 
   
 
    
MetaKey
 
    
 
   
 
   
 
    
PageX
 
    
 
   
 
   
 
    
PageY
 
    
 
   
 
   
 
    
RelatedTarget
 
    
 
   
 
   
 
    
ScreenX
 
    
 
   
 
   
 
    
ScreenY
 
    
 
   
 
   
 
    
ShiftKey
 
    
 
   
 
   
 
    
Result
 
    
 
   
 
   
 
    
Target
 
    
 
   
 
   
 
    
Timestamp
 
    
 
   
 
   
 
    
Type
 
    
 
   
 
   
 
    
Which
 
    
 
   
 
   
 
    
PreventDefault ()
 
    
 
   
 
   
 
    
StopPropagation ()
 
    
 
   
 
   
 
    
StopImmediatePropagation ()
 
    
 
   
 
   
 
    
IsPropagationStopped ()
 
    
 
   
 
   
 
    
IsImmediatePropagationStopped ()
 
    
 
   
 
  

 

Trigger event Processor
Trigger (eventType, data)
TriggerHandler (eventType, data)
Convenient Method for triggering
Blur () change () click () dblclick () error () focus () focusin () focusout () keydown () keypress () keyup () load () mousedown () mouseenter () mouseleave () mousemove () mouseout () mouseover () mouseup () resize () scroll () select () submit () unload ()
Other event-related methods
1. listener for switching
Toggle (listener1, listener2 ,...)
2. Hover the mouse over the element
Hover (enterHandler, leaveHandler); hover (handler)
Make full use of (more) Events
Filter large data sets
Create an element by copying a template
Create subject tag
Add a new filter
Add a restricted control
Delete unnecessary filters and other tasks
The above in-depth understanding of jQuery event processing is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support the help house.