Javascript Basics (2) Events_Basic Knowledge

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

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

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

Commonly used attribute methods of Event objects in IE:

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

2.clientY: When the event occurs, the Y coordinate of the mouse pointer in the client area (excluding toolbars, scroll bars, etc.);

3.keyCode: For keyCode events, indicate the Unicode character of the pressed key. For keydown/keyup events, indicate that the pressed keyboard is a numeric indicator (get 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 caused the event to occur;

Commonly used attribute methods of event objects in DOM:

1.clientX;

2.clientY;

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

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

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

6.target: triggered event element/object;

7.type: name of the event;

The similarities and differences between the two event objects:

Same points:

1. Get the event type;

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

3. Detect Shift, Alt, Ctrl;

4. Get the client area coordinates;

5. Get screen coordinates;

Differences:

1. Get the target;

//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. Block the default behavior of events;

//IE: oEvent.returnValue=false;

//DOM: oEvent.preventDefault;

4. Terminate bubbling:

//IE:oEvent.cancelBubble=true;

//DOM:oEvent.stopPropagation

Event type:

1. Mouse events:

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 clicking the left mouse button;

ondblclick: when double-clicking the left mouse button;

2. 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;

3. HTML events:

onload: when loading the page;

onunload: when unloading the page;

abort: When the user terminates the loading process, if it has not been completely reloaded, an abort event occurs

error: event generated when a JavaScript error occurs;

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

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: event triggered when the window or frame size is resized;

scroll: event triggered when the user scrolls or has a scroll bar;

focus: when focus is lost;

blur: when getting focus;

Javascript event model

1.Javascript event model: 1. Bubbling type: When the user clicks the button: input-body-html-document-window (bubbles from bottom to top) IE browsing The device just uses bubbling

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

After ECMA standardization, other browsers support both types, capture happens first.

2. Three ways of writing traditional events:

1.

2.======<script>function name1(){alert('helloword!');}</script> / /Famous function

3. //Anonymous function

Copy code The code is as follows:

<script><br> Var button1=document.getElementById("input1");<br> button1.onclick=funtion(){<br> alert('helloword!')<br> }<br> </script>

3. How to write modern events:

Copy code The code is as follows:

//Add event in IE

<script><br> var fnclick(){<br> alert("I was clicked")<br> }<br> var Oinput=document.getElementById("input1");<br> Oinput.attachEvent("onclick",fnclick);<br> -----------------------------------------------<br> Oinput.detachEvent("onclick",fnclick);//Delete events in IE<br> </script>

Copy code The code is as follows:

//Add event in DOM

<script><br> var fnclick(){<br> alert("I was clicked")<br> }<br> var Oinput=document.getElementById("input1");<br> Oinput.addEventListener("onclick",fnclick,true);<br> -----------------------------------------------<br> Oinput.removeEventListener("onclick",fnclick);//Delete events in DOM<br> </script>

Copy code The code is as follows:

//Compatible with IE and DOM adding events

<script><br> var fnclick1=function(){alert("I was clicked")}<br> var fnclick2=function(){alert("I was clicked")}<br> var Oinput=document.getElementById("input1");<br> if(document.attachEvent){<br> Oinput.attachEvent("onclick",fnclick1)<br> Oinput.attachEvent("onclick",fnclick2)<br> }<br> else(document.addEventListener){<br> Oinput.addEventListener("click",fnclick1,true)<br> Oinput.addEventListener("click",fnclick2,true)<br> }<br> </script>