Basic Javascript knowledge (2) Event _ basic knowledge

This is the second article in The javascript series. It mainly introduces javascript events and is my own experience. I hope to help you with the Event object: (the event object is the property of the window object, when an event occurs, an event object is generated, the event ends, and the event object disappears)

In IE: window. event; // get the object

In DOM: argument [0]; // get the object

Common attribute methods for Event objects in IE:

1. clientX: X coordinates of the mouse pointer in the client area (excluding the toolbar and scroll bar) when an event occurs;

2. clientY: Y coordinates of the mouse pointer in the client area (excluding the toolbar and scroll bar) when an event occurs;

3. keyCode: For a keyCode event, it indicates the Unicode Character of the key to be pressed. For a keydown/keyup event, it indicates that the keyboard to be pressed is a number (to obtain the value of the key );

4. offsetX: X coordinate of the mouse pointer relative to the object that triggered the event;

5. offsetY: Y coordinate of the mouse pointer relative to the object that triggered the event;

6. srcElement: the element that causes the event;

Common attribute methods for event objects in DOM:

1. clientX;

2. clientY;

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

4. pageY; Y coordinate of the mouse pointer to the page;

5. StopPropagation: calling this method can prevent further event propagation (bubbling );

6. target: The Event element/object that is triggered;

7. type: event name;

Similarities and differences between the two event objects:

Similarities:

1. Obtain the event type;

2. Get the keyboard code (keydown/keyup event );

3. Check Shift, Alt, Ctrl;

4. Obtain the coordinates of the customer zone;

5. Obtain screen coordinates;

Differences:

1. Obtain the target;

// IE: var oTarget = oEvent. srcElement;

// DOM: var oTarget=oEvent.tar get;

2. Get the verification code;

// IE: var iCharCode = oEvent. keyCode;

// DOM: var iCharCode = oEvent. charCode;

3. prevent default events;

// IE: oEvent. returnValue = false;

// DOM: oEvent. preventDefault;

4. Terminate bubbling:

// IE: oEvent. cancelBubble = true;

// DOM: oEvent. stopPropagation

Event Type:

I. mouse events:

Onmouseover: When the mouse moves in;

Onmouseout: When the mouse is removed;

Onmousedown: When you press the mouse;

Onmouseup: When the mouse is raised;

Onclick: Click the left mouse button;

Ondblclick: double-click the left mouse button;

Ii. Keyboard Events:

Onkeydown: This occurs when you press a key on the keyboard;

Onkeyup: This occurs when the user releases a pressed key;

Keypress: when the user keeps pressing the key;

Iii. HTML events:

Onload: when loading the page;

Onunload: When the page is uninstalled;

Abort: if the user has not been fully reproduced before terminating the loading process, an abort event occurs.

Error: events generated when an error occurs in javascript;

Select: select event triggered when the user selects a character in an input or textarea

Change: In an input or textarea, when it loses focus, the change event is triggered in select.

Submit: triggers the submit event when the form is submitted;

Reset: reset

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

Scroll: events triggered when a user scrolls or has a scroll bar;

Focus: when the focus is lost;

Blur: Get focus;

Javascript event model

1. Javascript event model: 1. Bubble Type:When you click the button: input-body-html-document-window (bottom-up bubble) IE browser only uses bubble

2. Capture type:When you click the button: window-document-html-body-input (from top to bottom)

After ECMA standardization, other browsers support two types. Capture occurs first.

2. Three traditional event writing methods:

1.

2.===== Script function name1 () {alert ('helloword! ');} Script // famous Function

3.// Anonymous Function

The Code is as follows:

Script
Var button1 = document. getElementById ("input1 ");
Button1.onclick = funtion (){
Alert ('helloword! ')
}
Script

3. Modern event writing methods:

The Code is as follows:

// Add an event to IE

Script
Var fnclick (){
Alert ("I Have Been clicked ")
}
Var Oinput = document. getElementById ("input1 ");
Oinput. attachEvent ("onclick", fnclick );
--------------------------------------
Oinput. detachEvent ("onclick", fnclick); // delete an event in IE
Script

The Code is as follows:

// Add an event to the DOM

Script
Var fnclick (){
Alert ("I Have Been clicked ")
}
Var Oinput = document. getElementById ("input1 ");
Oinput. addEventListener ("onclick", fnclick, true );
--------------------------------------
Oinput. removeEventListener ("onclick", fnclick); // delete an event in the DOM
Script

The Code is as follows:

// Compatible with IE and DOM addition events

Script
Var fnclick1 = function () {alert ("I Have Been clicked ")}
Var fnclick2 = function () {alert ("I Have Been clicked ")}
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