Event object: (the event object is a property of the window object. When an event occurs, the event object is generated at the same time. The event ends and the event object disappears)
IE:window.event;//Get object
In DOM: argument[0];//Get object
Common attribute methods for Event objects in IE:
1.clientX: When the event occurs, the X coordinate of the mouse pointer in the client area (excluding toolbars, scrollbars, etc.);
2.clientY: When an event occurs, the Y coordinate of the mouse pointer in the client area (excluding toolbars, scrollbars, etc.);
3.keyCode: For the keyCode event, it indicates the Unicode character of the key pressed, and for the keydown/keyup event, it indicates that the pressed keyboard is a numerical indicator (gets the value of the key);
4.offsetX: The X coordinate of the mouse pointer relative to the object that caused the event;
5.offsetY: The Y coordinate of the mouse pointer relative to the object that caused the event;
6.srcElement: the element that causes the event to occur;
Common attribute methods for event objects 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 events (bubbling);
6.target: triggered event element/object;
7.type: The name of the event;
The similarities and differences between two event objects :
Similarities:
1. Get the event type;
2. Get the keyboard code (keydown/keyup event);
3. Detect Shift, Alt, Ctrl;
4. Obtain the coordinates of the client area;
5. Obtain screen coordinates;
Differences:
1. Obtain the target;
//IE: var oTarget=oEvent.srcElement;
//DOM: var oTarget=oEvent.target;
2. Obtain the character code;
//IE: var iCharCode=oEvent.keyCode;
//DOM: var iCharCode=oEvent.charCode;
3. The default behavior of blocking events;
//IE: oEvent.returnValue=false;
//DOM: oEvent.preventDefault;
4. Stop bubbling:
//IE:oEvent.cancelBubble=true;
//DOM:oEvent.stopPropagation
Event Type:
1. Mouse Event:
onmouseover: When the mouse is moved in;
onmouseout: When the mouse is moved out;
onmousedown: When the mouse is pressed;
onmouseup: When the mouse is raised;
onclick: When clicking the left mouse button;
ondblclick: When double-click 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;
Three.HTML events:
onload: when loading the page;
onunload: When uninstalling the page;
abort: If the user has not been fully reproduced before the loading process is terminated, the abort event will occur if he has not been completely reproduced.
error: The event generated when an error occurs in JavaScript;
select: The 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: When the form is submitted, the submit event is triggered;
reset: reset
resize: The event that is triggered when the window or frame is resized;
scroll: Events fired when the user scrolls or has scroll bars;
focus: when the focus is lost;
blur: When you get focus;
Javascript event model
1. Javascript event model: 1. Bubble type: <input type="button">When the user clicks the button: input-body-html-document-window (bubble from bottom to top) IE browser just uses bubble
2. Capture type: <input type="button">When the user clicks the button: window-document-html-body-input (from top to bottom)
After ECMA standardization, other browsers support two types, and capture occurs first.
2. Three ways to write traditional events:
1.<input type="button" onclick="alert('helloworld!')">
2.<input type="button onclick=name1()">======<script>function name1(){alert('helloword!');}</script> //Name function
3.<input type="button" id="input1"> //Anonymous function
The code copy is as follows:
<script>
Var button1=document.getElementById("input1");
button1.onclick=funtion(){
alert('helloword!')
}
</script>
3. Modern event writing method:
The code copy is as follows:
<input type="button" id="input1"> //Add events in IE
<script>
var fnclick(){
alert("I was clicked")
}
var Oinput=document.getElementById("input1");
Oinput.attachEvent("onclick",fnclick);
--------------------------------------
Oinput.detachEvent("onclick",fnclick);//Delete event in IE
</script>
The code copy is as follows:
<input type="button" id="input1"> //Add events in DOM
<script>
var fnclick(){
alert("I was clicked")
}
var Oinput=document.getElementById("input1");
Oinput.addEventListener("onclick",fnclick,true);
--------------------------------------
Oinput.removeEventListener("onclick",fnclick);//Delete event in DOM
</script>
The code copy is as follows:
<input type="button" id="input1"> //Compatible with IE and DOM addition events
<script>
var fnclick1=function(){alert("I was clicked")}
var fnclick2=function(){alert("I was 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>