Javascript basics (ii) events

Event object :(the Event object is the property of the window object. When the Event occurs, the Event object is generated at the same time. The Event ends and the Event object disappears)

IE: window. The event; // gets the object

DOM: argument [0]. // gets the object

Common attribute methods of Event object in IE:

1. ClientX: the X coordinate of the mouse pointer in the client area (excluding toolbar, scroll bar, etc.) when the event occurs;

2. ClientY: the y-coordinate of the mouse pointer in the client area (excluding toolbar, scroll bar, etc.) when the event occurs;

3. KeyCode: for the keyCode event, the Unicode character indicating the pressed key; for the keydown/keyup event, the pressed keyboard is the numeric representation (to get the value of the key);

4. OffsetX: the X coordinate of the mouse pointer relative to the object causing the event;

5. OffsetY: the y-coordinate of the mouse pointer relative to the object causing the event;

6. SrcElement: the element that causes the event to occur;

Common attribute methods of the event object in DOM:

1. ClientX;

2. ClientY;

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

4. PageY; The Y coordinate of the mouse pointer relative to the page;

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

6. Target: the triggered event element/object;

7. Type: name of the event;

The similarities and differences between the two event objects :

Similarities:

1. Get the event type;

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

3. Detect Shift, Alt, Ctrl;

4. Obtain coordinates of customer area;

5. Get screen coordinates;

Difference:

1. Acquire goals;

/ / 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. Default behavior of blocking events;

/ / IE: oEvent. ReturnValue = false;

DOM: / / oEvent. The preventDefault;

4. Stop bubbling:

/ / IE: oEvent cancelBubble = true;

DOM: / / oEvent stopPropagation

Event type:

I. mouse event:

Onmouseover: when the mouse moves in;

Onmouseout: when the mouse moves out;

Onmousedown: when the mouse is pressed;

Onmouseup: when the mouse is lifted;

Onclick: when the left mouse button is clicked;

Ondblclick: double-click the left mouse button;

Ii. Keyboard events:

Onkeydown: occurs when the user presses a key on the keyboard;

Onkeyup: occurs when the user releases a pressed key;

Keypress: when the user keeps pressing the key;

Three.HTML events:

Onload: when a page is loaded;

Onunload: when a page is unloaded;

Abort: abort occurs when the user terminates the load process before he has not been fully reproduced

Error: an event that occurs when a javascript error occurs;

Select: the select event that fires 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 the select

Submit: when the form is submitted, the submit event is triggered;

Reset reset:

Resize: an event that is triggered when a window or frame is resized;

Scroll: the event that fires when the user scrolls or has a scroll bar;

When you lose focus;

Blur: when you're in focus;

Javascript's event model

1.Javascript event model: 1. Bubble type: < 2. Input type = "button" > When the user clicks the button: input-body-html-document-window (bubbling from the bottom up) IE just bubbles

      2. Capture type: < Input type = "button" > When the user clicks the button: window-document-html-body-input

2. Three ways of writing traditional events:

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

2. < Input type = "button onclick = name1 ()" > = = = = = = < Script> The function name1 () {alert (' helloword! '); } < / script> // named function

3. < Input type = "button" id = "input1" >   // anonymous function

<script>

 Var button1=document.getElementById("input1");

 button1.onclick=funtion(){

 alert('helloword!')

 }

</script>

3. Writing style of modern events:

<input type="button" id="input1">  //Add events in IE
<script>

 var fnclick(){

 alert(" I got clicked ")

 }

 var Oinput=document.getElementById("input1");

 Oinput.attachEvent("onclick",fnclick);

 --------------------------------------

 Oinput.detachEvent("onclick",fnclick);//Delete event 
 in IE
</script>

<input type="button" id="input1">  //Add events in the DOM
<script>

 var fnclick(){

 alert(" I got clicked ")

 }

 var Oinput=document.getElementById("input1");

 Oinput.addEventListener("onclick",fnclick,true);

 --------------------------------------

 Oinput.removeEventListener("onclick",fnclick);//Delete event 
 in the DOM
</script>

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

 var fnclick1=function(){alert(" I got clicked ")}

 var fnclick2=function(){alert(" I got 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>