JQuery Event Handling

Browser event model DOM level NO. 0 Event model

1. Event instance

   His attributes provide a large amount of information about the triggered events that are currently being processed. This includes details such as which event is triggered on which element, the coordinates of the mouse event, and which key was clicked in the keyboard event.

2. Event bubbling

When an event is triggered on an element in the DOM tree, the event model checks to see if the element has created a specific event handler. If it is, the event handler that was created is called. The event model then examines the parent element of the target element to see if it has created a processor for this event type. If it is, it invokes the created processor, checks its parent element, and then the 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 using jquery bound event handlers

Bind (EventType, data, handler); Bind (EventMap)
You can add a dot-delimited suffix to the event name to specify the namespace to bulk manipulate the event handler.
You can bind multiple events to an element by using a single bind () method.
$ ('. whatever '). Bind ({    click:function (event) {/* handle */},    Mouseenter:function (event) {/* handle */},    Mouseleave:function (Event) {/* handle */}})
Specific event bindings:
Blur Change Click DblClick error Focus focusin focusout keydown keypress keyup load MouseDown mouseenter mouseleave Mousem Ove Mouseout mouseover MouseUp Ready Resize Scroll Select Submit Unload
When using these handy methods, the Event.data value is read-only. They have a parameter listener function that represents the event handler.
Focusin Focusout
One (eventtype, data, listener)
To delete an event handler
Unbind (EventType, listener); Unbind (Event)
To delete a specific event handler
Delete all event handlers in the namespace
$ (' * '). Unbind ('. Fred ')
Event instance
Browser-independent Jquery.event properties and methods

 
 

  
  
 
   
 
    
Name
 
    
Describe
 
   
 
   
 
    
Altkey
 
    
 
   
 
   
 
    
Ctrlkey
 
    
 
   
 
   
 
    
Currenttarget
 
    
 
   
 
   
 
    
Data
 
    
 
   
 
   
 
    
Metakey
 
    
 
   
 
   
 
    
PageX
 
    
 
   
 
   
 
    
Pagey
 
    
 
   
 
   
 
    
Relatedtarget
 
    
 
   
 
   
 
    
ScreenX
 
    
 
   
 
   
 
    
ScreenY
 
    
 
   
 
   
 
    
Shiftkey
 
    
 
   
 
   
 
    
Result
 
    
 
   
 
   
 
    
Target
 
    
 
   
 
   
 
    
Timestamp
 
    
 
   
 
   
 
    
Type
 
    
 
   
 
   
 
    
which
 
    
 
   
 
   
 
    
Preventdefault ()
 
    
 
   
 
   
 
    
Stoppropagation ()
 
    
 
   
 
   
 
    
Stopimmediatepropagation ()
 
    
 
   
 
   
 
    
Ispropagationstopped ()
 
    
 
   
 
   
 
    
Isimmediatepropagationstopped ()
 
    
 
   
 
  
 
 
Pre-manage event handlers (deprecated)
 
 

  
  
 
   
Create live event handling
Live (EventType, data, listener)
 
   
Delete Live event handling
Die (EventType, listener)
 
  
 
 
Triggering event handlers
Trigger (EventType, data)
Triggerhandler (EventType, data)
A convenient way to trigger
Blur () Change () Click () DblClick () error () Focus () Focusin () focusout () KeyDown () keypress () KeyUp () load () MouseDown () mo Useenter () MouseLeave () MouseMove () mouseout () mouseover () MouseUp () resize () scroll () Select () Submit () unload ()
Other event-related methods
 
 

  
  
 
   
Switch-action Listener
Toggle (Listener1, Listener2, ...)
 
   
Hover the mouse over an element
Hover (Enterhandler, Leavehandler); Hover (handler)
 
  
 
 
Make full use of (more) events to filter large data sets
Creating elements from Template replication
Creating a BODY Tag
Add a new filter
To add a qualified control
Remove unwanted filters and other tasks
There's always room for improvement.
JQuery Event Handling