jquery Review-Events

JQuery Event Handling

First , the binding method of the Ready processor event

1 , bind (EventType, data, Hanlder)

Creates a function that acts as an event handler for the time type specified on all elements in the matching set

Parameters:

EventType: (String) Specifies the name of the event type for the processor that will be created. You can specify multiple event types by using a space-delimited list .

Data: (object) Caller-supplied information that is used to attach to the event instance's database property for use by the processor function. If omitted, the second parameter is a processor function

Handler: (function) The function that will be created as the event handler. When this function is called, the event instance is passed in

2 , One (eventtype, data, listener)

Create a function and use it as an event handler for all elements in the matching set that specify the event type. Once the processor is executed, it will be automatically deleted.

Parameters:

EventType: (String) Specifies the name of the event type for the processor that will be created.

Data: A caller-supplied figure used to attach to an event instance for use by a processor function. If omitted, you can specify the second parameter as the processor function

Listener: (function) function to be created as a one-time event handler

3 , Unbind (EventType, listener)

Second, pre-management event processor

Using the bind () and Unbind () methods, it is easy to control which event handlers are created on the elements in the DOM. The convenience of a ready processor is that you can create a processor on a DOM element from scratch. These DOM elements are either created by HTML tags on the page or created on a ready processor.

But in the pages we frequently introduce DOM elements to get rid of them, and when it comes to managing the event handlers for these dynamic elements, the ready processor does not have much of a role to play. Because this dynamic element does not exist while the ready processor is executing.

1 , create " Live the event handling

Live () allows you to pre-create time processors for elements that do not already exist

Live (EventType, data, listener)

When a time element of the specified type occurs, the incoming listener is called as a processor, regardless of whether the elements already exist when the live method is called

Note: The Livelive method binds the listener to the document. Do not bind the listener directly on the element, so this inside the method does not represent an element.

Cons: can only be applied to selectors and cannot be applied to derived package sets

$ (' img '). Live (...); Correct

$ (' img '). Closest (' div '). Live (...) Error

2 , delete ' Live ' Event Handlers

Die (Eventtype,listener)

Iii. related methods of other events

1 , switch-action listener

Toggle (Listener1, Listener2, ...)

Creates the passed-in function as a looping list of the Click event handlers for all elements in the wrapper set. The processor will be called in the subsequent click event

2 , Hover Binding Method

Hover (Enterhanlder, Leavehandler)

Create MouseEnter and MouseLeave event handlers for matching elements that are triggered only when the mouse enters or leaves the area covered by the element, ignoring transitions that move to child elements

Parameters:

Enterhandler (function) will become a function of the MouseEnter processor

Leavehandler (function) is going to be a function of the MouseLeave processor

Return value: Packing set

Four, Event Object

1 , Event Properties

Property	Describe
Altkey	Set to Ture when the ALT key is already pressed, otherwise false
Ctrlkey	Set to Ture when the CTRL key is pressed, otherwise false
Currenttarget	The current element of the bubbling stage. It is the same object as the event handler function context object
Data	If it is worthwhile, when creating the processor, pass it as the second parameter to bind ()
Metakey	Returns True when the trigger time is pressed when the CTRL key (Apple corresponds to the comand) key has been hit
PageX	For mouse events, specifies the horizontal coordinates of the cursor relative to the page dot when the event is triggered
Pagey	For mouse events, specifies the vertical coordinates of the cursor relative to the page dot when the event is triggered
Relatedtarget	For mouse events, find the element that the cursor left or entered when the event was triggered
ScreenX	For mouse events, specifies the horizontal coordinates of the cursor relative to the screen origin when the event is triggered
ScreenY	For mouse events, specifies the vertical coordinates of the cursor relative to the screen origin when the event is triggered
Shiftkey	Set to True if the SHIFT key has been pressed when the event is triggered, otherwise false
Target	Find the element that triggered the event
Timestramp	Jquery.event Event Stamp When the instance is created, in milliseconds
Type	Specifies the type of event that is triggered for all events (for example, click). This is useful if you are using a time processor to handle multiple events
which	For keyboard events, specify the numeric code that triggers the event, and for mouse events, specify which button is pressed (1 is the left key, 2 is the middle key, and 3 is the right key)

2 , Methods

Property	Describe
Preeventdefault ()	Block any default implied actions (such as form submission, link redirection, change in check box state), etc.
Stopprogation ()	Stop leave is further spread along the DOM tree. The attached events on the current target element are not affected, and custom events are supported
Stopimmediatepropagation ()	Stops all events from propagating further up the DOM tree. Include events on the currently attached element
Isdefaultpropagation ()	Returns True if the Preventdefault () method has been called on this instance
Ispropagationstopped ()	Returns True if the Stopprogation () method has been called
Isimmediatepropagationstopped ()	For mouse events, specifies the horizontal coordinates of the cursor relative to the page dot when the event is triggered

V. Summary

Binding	Bind	Live	Delegate	On
Unbind	Unbind	Die	Undelegate	Off

In addition, there is an event binding mode A.click (function () {}); A.change (function () {}); They act on bind, just shorthand.

The feature of BIND is that it binds the listener to the target element and has a binding that doesn't matter when the element on the page is not dynamically added. But if you add an element dynamically in the list, clicking on it is unresponsive and you must bind again.

To be less troublesome, we can use live. The live method binds the listener to the document. Do not bind the listener directly to the element live is the use of event delegation mechanism to complete the interception of events, the processing of the node entrusted to the document. In the listener function, we can use Event.currenttarget to get to the node that is currently snapping to the event.

Example:

$ (' #myol Li '). Live (' click ', gethtml); The advantage of using event delegation at a glance, the newly added element does not have to bind the listener again. It seems that live this goods is really good, later abandoned bind to use it! Yes? The answer is no, and it is a big negation. Because the listener is bound to the document, the event is processed to wait for the layer to bubble until it bubbles to the root node before it starts processing. To this end, jquery has officially announced the release of live in the 1.7 version, instead of replacing it in other ways. Because of the drawbacks of live, it is better to consider binding on the nearest parent element.

Conform to normal logic, delegate was born. The delegate (SELECTOR,TYPE,[DATA],FN) parameter has a selector that specifies the target element that triggers the event, and the listener is bound on the element that called the method. The last is the on method, the On (TYPE,[SELECTOR],[DATA],FN) parameter is similar to delegate but there are subtle differences, first type and selector change position, and then selector becomes optional. The reason for the exchange position is not good verification, it should be to make the visual more comfortable. Example: $ (' #myolli '). On (' click ', gethtml); You can see that Event.currenttarget is Li himself, just like the effect of bind. As for the transfer of selector in, it is the same meaning as delegate, in addition to the parameters of different order, the other exactly the same.

The official recommendation is to use on as much as possible, because the other methods are internal call on to complete, directly using on can improve efficiency, and you can use on to replace the other three of the wording. As for how to replace I want to do not have to be so straightforward to write, really understand their differences after the natural is not difficult.

jquery Review-Events