Introduction of Javascript time
Events:
Events is the document or browser window - some of the specific interaction instant
- the interaction between Javascript and HTML are realized through events
- for the Web application, a representative of the following events: click event, remove events, the mouse moved to the keyboard press/up event etc.
Document is loaded, the browser to load a page that is loaded in top-down order, read a line when I was running a line, if the scripts to write in the above, when executing code page is not loaded
1. The onl oad event: onl oad event trigger after completion of the whole page load for window binding an onl oad event
Note: Windows. The onl oad behind only appear once on a page, the code will overwrite the previous
2. The Event object (Event)
//the Event object represents the state of events, such as Event elements, in which the state of the keyboard keys, the location of the mouse, the mouse button state, events and functions often used in combination, the function will not perform before Event!
//mouse/keyboard attribute
Example: ClientX: return when the event is triggered when the mouse pointer coordinates,
ClientY: return when events are set out, the vertical coordinates of the mouse pointer,
Note: some browsers are not compatible event, so you need to solve the problem of compatibility,
Methods: event=event | | window. The event
3. The event bubbling (mercifully)
- the so-called bubbling up means the incident pass, when the offspring elements on the event is triggered, the ancestor of the same event will be triggered
- in the development of most of the bubbling are useful, if you don't want Bubble can occur through the event object cancel bubbling (event. Cancel | mercifully=true)
4. Event delegate
- refers to the events and unified binding elements to the common ancestor element, such as descendant elements on the event triggered, would have been bubbling to the ancestor element, from which to handle events by the response function of the ancestor element
- event delegate is the use of bubbling through the delegate can reduce the number of binding, improve the performance of the program
- the event object attribute target: return to trigger the elements of the event target (events)
5. Events of binding
For example:
/*
Use object.=function form binding events
It is only once for the same element to bind to the same event at the same time
Cannot bind the many times, if the binding times, later will override the previous
*/
/*
BTN. Onclick=function () {
Alert (1);
};
BTN. Onclick=function () {
Alert (2);
//addEventListener ()
- in this way can also bind response function for the element
- parameters:
1. The string of events, do not add on
2. The callback function, this function is called when the event trigger,
3. Whether the capture phase triggering event, need a Boolean value, generally spread false
Can use the addEventListener () at the same time as an element of the same event multiple response function
So when the event is triggered, response function will be implemented according to the function of binding order
This method does not support IE8 and under browser