jquery Practice-Events

The interface rendered via HTML pages is asynchronous and event-driven. Steps:

• Create a user interface
• Waiting for another thing to happen
• React accordingly.
• Repeat

1. The event model implemented by the browser

DOM Level NO. 0 Event model	An event handler is declared by a reference to a function instance that is assigned to a property of a DOM element. or HTML attributes. When assigned to an HTML attribute, anonymous functions are automatically created using the value of the attribute as the body of the function OnClick <=> Click event onmouseover <=>mouseover Events In an event handler, you can take advantage of the events parameter Violate the non-intrusive JavaScript principle Each element can only register one event handler at a time for any particular event type
DOM Level 2nd event Model	1. Create an Event Established by an element method: Multiple event handlers can be in the same event on the same element AddEventListener (Eventype,listener,usecapture) Eventype:click,mouseover ... Listener: Function Reference Usecapture: Event propagation, capture phase Ie:attchevent (Eventname,handler) Eventname:onclick,onmouseover ...
jquery Event Model	Provides a unified method for building event handlers Allows multiple handlers for each event to be established on each element With the standard event type name: Click,mouseover Using an event instance as a handler parameter Normalize the most common properties of an event instance Provides a uniform method for canceling events and blocking default actions jquery does not support capture phase

In most browsers, an instance of an event is passed to the handler as the first parameter. But the ID assigns the event instance to the Window object named event property
Event capture: Invokes an event handler from the root to the target element. IE does not support capture phase
Event bubbling: Invokes the event handler for the target element, as well as the parent's event handler, until the DOM root
Block event bubbling: event.stoppropagation () ie:event.cancelbubble=true
Cancel the default semantics of the event: set the return value of the handler to false. A, form

1. Using jquery to bind event handlers to elements

Establishes a function on all elements of a matching set as an event handler for the specified event type	Bind (Eventtype,data,listener)	EventType: String. Click,mouseover or Click.scope Data: Object, Event.data, can be omitted Listener: Functions	Packing set	$ (' #thing '). Bind (' Click.editmode ', listener1) $ (' #thing '). Bind (' Click.display ', listner2) $ (' #thing '). Unbind (' Click.editmode ') Removes all click bindings from the EditMode namespace from all elements on the page
Some shortcuts	Blur (Listener) Change Click Dbclick Error Focus KeyDown KeyPress KeyUp Load MouseDown MouseMove Mouseout MouseOver MouseUp Resize Scroll Select Submit Unload			Data cannot be specified in this way
Create an event and delete it once	One (Eventtype,data,listener)		Packing set
Removes the event handler specified by an optional passed parameter from all elements of the wrapper set If no arguments are supplied, all listeners are removed from the element	Unbind (Eventtype,listener) Unbind (EventType)	EventType: Optional Listener: Optional	Packing set	If you omit the parameter, all listeners are deleted You cannot delete a function if it is an inline function that is anonymous

2. Event object Instance

Altkey	Alt, True/false
Ctrlkey	Ctrl. True/false
Data	Bind (, data,,)
KeyCode	Keyup,keydown. are uppercase versions. Make sure the case can be used Shiftkey
Metakey	Meta, True/false
PageX	Mouse events. The horizontal coordinates of the event relative to the page
Pagey	Mouse events.
Relatedtarget	The element that the cursor leaves or enters
ScreenX	Horizontal coordinates relative to the screen origin
ScreenY
Shiftkey	Shift, True/false
Target	The event is triggered on that element.
Type	Event Type
which	Keyboard: Built-in digital code Mouse: The mouse button is pressed

affect the event propagation function:
Stoppropagation () prevents events from propagating upward along the DOM tree
Preventdefault () canceling the default action event

Stop event propagation and cancel the default behavior of the event: the processing function returns false

3. Triggering an event handler under script control

The td> 

call any of the matched elements, any event handlers established for the passed event type	trigger (EventType)	string	Wrapper Set	is not propagated, and many properties of the event instance have no value. Because
is called as a normal function some easy way	blur () Click () Focus () Select () Submit ()		wrapper set
for click Events. Two processing functions toggle between	Toggle (listenerodd,listenereven)		wrapper set
mouseover,mouseout	hover (overlistener,outlistener)		packing set

jquery Practice-Events