Deep understanding of jquery event handling _jquery

The event model of the browser

DOM Level NO. 0 Event model

1.Event instance

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

2. Event bubbling

When you trigger an event on an element in the DOM tree, the event model checks to see if the element has created a specific event handler. If so, the event handlers that have been created are invoked. 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 so, the created processor is invoked, then its parent element is checked, and the parent element's parent, and so on, until the top of the DOM tree.

DOM Level 2nd event Model

IE Event Model

jquery Event Model

Using the jquery binding event handler

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 for an element through 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 Select Submit Scroll

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)

Removing event handlers

Unbind (EventType, listener); Unbind (Event)

To remove a specific event handler

Delete all event handlers in a 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 ()

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 () () unload ()

Other event-related methods

1. Switch function of the listener

Toggle (Listener1, Listener2, ...)

2. Hover the mouse over the element

Hover (Enterhandler, Leavehandler); Hover (handler)

Take full advantage of (more) events

Filter large data sets

Creating elements from Template replication

Create a BODY tag

Add a new filter

To add a qualifying control

Remove unwanted filters and other tasks

This in-depth understanding of jquery event processing is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.