JavaScript Basics (ii) Events _ Basics

Event object: (an Event object is a property of a Window object that, when an event occurs, produces an event object, the event ends, and an event object disappears)

In IE: window.event;//get objects

DOM: argument[0];//fetching objects

The property methods commonly used by event objects in IE:

1.clientX: When the event occurs, the mouse pointer in the client area (excluding toolbars, scroll bars, etc.) of the x-coordinate;

2.clientY: The y-coordinate of the mouse pointer in the client area (excluding toolbars, scroll bars, etc.) when the event occurs;

3.keyCode: For the KeyCode event, indicates the Unicode character of the pressed key, and for the Keydown/keyup event, indicates that the pressed keyboard is a digital representation (gets the numeric value of the key);

4.offsetX: The x-coordinate of the mouse pointer relative to the object that raised the event;

5.offsetY: The y-coordinate of the mouse pointer relative to the object that raised the event;

6.srcElement: The element that causes the event to occur;

Property methods commonly used by event objects in the DOM:

1.clientX;

2.clientY;

3.pageX mouse pointer relative to the X coordinate of the page;

4.pageY; the mouse pointer is relative to the y-coordinate of the page;

5.StopPropagation: This method can be invoked to prevent further propagation of the event (bubbling);

6.target: Triggered event element/object;

7.type: The name of the event;

the same and different points of two event objects :

Same point:

1. Get the event type;

2. Get keyboard code (Keydown/keyup event);

3. Detect Shift,alt,ctrl;

4. Obtain the customer area coordinates;

5. Get the screen coordinates;

Different points:

1. access to objectives;

Ie:var otarget=oevent.srcelement;

Dom:var Otarget=oevent.target;

2. Get character code;

Ie:var Icharcode=oevent.keycode;

Dom:var Icharcode=oevent.charcode;

3. Prevent the default behavior of events;

Ie:oevent.returnvalue=false;

DOM:oEvent.preventDefault;

4. Stop bubbling:

Ie:oevent.cancelbubble=true;

DOM:oEvent.stopPropagation

Event Type:

A. Mouse event:

onmouseover: When the mouse moves in;

onmouseout: When the mouse is moved out;

OnMouseDown: When the mouse is pressed;

OnMouseUp: When the mouse is lifted;

OnClick: Click the left mouse button;

OnDblClick: Double click the left mouse button;

Two. Keyboard events:

OnKeyDown: Occurs when the user presses a key on the keyboard;

OnKeyUp: Occurs when a pressed key is released by the user;

KeyPress: When the user has been pressing the key does not put;

Three. html event:

OnLoad: when loading the page;

OnUnload: When the page is unloaded;

Abort: Abort event occurs before the user terminates the load process, if he has not been fully reproduced

Error:javascript The event that occurs when an error arises;

Select: In an input or textarea, when a user selects a character, a select event that is triggered

Change: In an input or textarea, when it loses focus, triggers the Change event in the Select

Submit: Triggers the Submit event when the form is submitted;

Reset: RESET

Resize: Event triggered when the window or frame size is adjusted;

Scroll: An event that is triggered when a user scrolls or has a scroll bar;

Focus: When lose the focal point;

Blur: When the focus is obtained;

The event model for JavaScript

1.Javascript Event Model: 1. Bubble type: <input type= "button" > when the user clicks on the button: Input-body-html-document-window (bubbles up from the bottom) IE browser is just bubbling

2. Capture type: <input type= "button" > when the user clicks the button: Window-document-html-body-input (from top down)

After ECMA standardization, the other browsers support two types, and the capture occurs first.

2. Three ways of writing traditional events:

1.<input type= "button" onclick= "alert (' helloworld! ')" >

2.<input type= "button onclick=name1 ()" >======<script>function name1 () {alert (' helloword! ');} </script>//Famous function

3.<input type= "button" id= "INPUT1" >//anonymous function

Copy Code code as follows:

<script>
Var Button1=document.getelementbyid ("input1");
Button1.onclick=funtion () {
Alert (' helloword! ')
}
</script>

3. How to write modern events:

Copy Code code as follows:

Add events <input type= "button" id= "INPUT1" >//ie

<script>
var Fnclick () {
Alert ("I was clicked on")
}
var Oinput=document.getelementbyid ("Input1");
Oinput.attachevent ("onclick", Fnclick);
--------------------------------------
Oinput.detachevent ("onclick", Fnclick); Delete event in//ie
</script>

Copy Code code as follows:

Add events <input type= "button" id= "INPUT1" >//dom

<script>
var Fnclick () {
Alert ("I was clicked on")
}
var Oinput=document.getelementbyid ("Input1");
Oinput.addeventlistener ("onclick", fnclick,true);
--------------------------------------
Oinput.removeeventlistener ("onclick", Fnclick); Delete event in//dom
</script>

Copy Code code as follows:

<input type= "button" id= "INPUT1" >//Compatible with IE and DOM add events

<script>
var fnclick1=function () {alert ("I was clicked on")}
var fnclick2=function () {alert ("I was clicked on")}
var Oinput=document.getelementbyid ("Input1");
if (document.attachevent) {
Oinput.attachevent ("onclick", Fnclick1)
Oinput.attachevent ("onclick", Fnclick2)
}
Else (Document.addeventlistener) {
Oinput.addeventlistener ("click", Fnclick1,true)
Oinput.addeventlistener ("click", Fnclick2,true)
}
</script>