event, event stream, event delegate

Event:

I. Event driver (three elements):

1. Event: JavaScript captures the user's actions or behavior on the page (e.g. onclick, onmouseover, KeyDown, etc.)

2. Event Source: The element that triggered the event (e.g. a button, a key, etc.)

3. Event handler: The program that is executed when the event is triggered, also known as "event handle" and "Event listener"


Two. Binding event (with compatibility issues)

1. In IE, how to add or remove multiple handlers for the same event of an object:

Object.    Attachevent ("On event", "handler"); Add Event

Object.    DetachEvent ("On event", "handler"); Delete Event

Note: The events added in these two methods are executed in the opposite order as they were added;

Unable to delete the anonymous function (because a reference to the function could not be found);

2. In the standard browser of the Web, how to add or remove multiple handlers for the same event of an object:

Object.   Addeventlisener ("event", "Handler", Boolean); Add Event

Object.  Removeeventlisener ("event", "Handler", Boolean); Delete Event

Note: The execution order of the events added within these two methods is consistent with the order of addition;

Unable to delete the anonymous function (because a reference to the function could not be found);

3. When each event is triggered, the program generates a temporary event object for the event that contains some information about the event, and when the function has been called, the object is released.
Code display (example): Btn.onclick=function (e) {
var ev = e | | Windown.event;
............................
}
Explanation: The above E is the event object that occurs when the Click event occurs;
Windown.event: How to Get event objects in IE
E: How to Get Event objects for other browsers

Three. Mouse events (when a mouse event is triggered, the corresponding event object has the following properties:)

1. Mouse relative to Browser location: ClientX, ClientY

2. Position of mouse relative to the screen: ScreenX, ScreenY

3. Location of the mouse relative to the event source (the object that called the event): OffsetX, OffsetY (not supported FF,FF required by calculation)

4. onmouseover mouse to move in an object

5. onmouseout Mouse to move out of an object

6. onmouseup when the mouse is lifted

7. onmousedown when the mouse is pressed

8. onmousemove when the mouse moves

9. Dommousescroll Mouse Wheel event (FF)
The properties of the event object for this method are: detail (if positive, indicates that the mouse wheel is slipping; negative value, slide up)

OnMouseWheel Mouse Wheel event (Ie,chrom)
The properties of the event object for this method are: Wheeldelta (if positive, indicates that the mouse wheel is sliding upward; negative value, downward)

Some of the properties of the event (Baidu) are worth the information:
1. The "Event.wheeldelta" property value in the "MouseWheel" event: The value returned, if it is positive, indicates that the scroll wheel is scrolling up, and if a negative value indicates that the scroll wheel is scrolling down; The returned values are multiples of 120, that is: amplitude size = returned value/120.

2. The "Event.detail" property value in the "Dommousescroll" event: The value returned, if it is negative, indicates that the wheel is scrolling up (as opposed to "Event.wheeldelta"), and if positive values indicate that the scroll wheel is scrolling down; The returned value is 3 A multiplier, that is: amplitude size = The value returned/3.



Four. Keyboard events

1. KeyDown when you press the keyboard key

2. KeyUp when the keyboard button is lifted

3. KeyPress press and hold the keyboard key

4. KeyCode Enter:13
Shift:16
Ctrl:17
Alt:18

5. Altkey, Ctrlkey, Shiftkey: whether to press the corresponding key, is to return True, no return false;


Five. Detecting event Type: type= "event"

For example: type = "click"; Indicates that the type of the event is a click event

Event Flow

I. Event flow (ie only supports bubbling events)

1. Bubbling event: Bubbles out from the inside, if the object being clicked is not set event, but it is still the source of the event (click which, which is the source of the event), but it does not set the corresponding event, at this time, it will delegate the event to its outer object, if the event source has the need to execute the program, This program will be executed before continuing to bubble out. (Addeventlisener ("event", Foo,false))

2. Capture-type event: Bubbles from the outermost layer (outermost reachable window object) (Addeventlisener ("event", Foo,true))


Two. The DOM standard event model (both bubbling and capture support), when a capture and bubbling program is bound, the capture is executed before the bubbling


Three. Block Event flow

1. IE: Event object. Cancelbubble = true;
2. FF: Event object. Stoppropagation;

Explanation: Set the above two properties in the method added by the A object, click the A object, if it is bubble type, then bubbles to the object will not continue to expand;
If it is a capture type, it will not continue to capture the layer when it is captured from the outermost layers.


Four. Properties of the Event object

1. Properties of Event object: IE target

FF srcelement

Event delegate:

Understanding: A Click event is set for an object A, at which time an event object is generated that contains mouse events and keyboard events, and this event object has an attribute target/srcelement, when you click Object A in the inner layer of a object, the event object invokes the property of the previous sentence Will return the clicked object A and get this object, we can get some information about this object A. The effect is to set a click event for the A object, but in fact we are in the code and set a click event for object A, which is the event delegate. The object a clicked on has a click event delegated to the object whose outer layer has a click event.

event, event stream, event delegate