This article is for the JavaScript event "event type" under the "Focus, mouse and wheel event," the attention points of the collation, share to everyone for your reference, the specific contents are as follows
One, focus events
These events are generally used in conjunction with the Document.hasfocus () method and the Document.activeelement property. The main are:
- Blur: Element loses focus, does not bubble;
- Domfocusin: With the HTML event focus, abandoned in DOM3, choose Focusin;
- Domfocusout: With the HTML event blur, in DOM3 abandoned, choose Focusout;
- Focus: The element obtains the focal point, does not return bubbles;
- Focusin: Gets focus, equivalent to the HTML event focal point, but bubbles;
- Focusout: Loss of focus, equivalent to HTML event blur;
Such as:
Window.onfocus = function () {
console.log (' Focus ');//focus
Console.log (Document.hasfocus ());//true
}
Window.onblur = function () {
console.log (' blur ');//blur
Console.log (Document.hasfocus ());//false
}
The following event is triggered when the focus shifts from one element in the page to another:
Focusout--> focusin--> Blur--> domfocusout--> Focus--> Domfocusin
Second, mouse events
9 mouse events are defined in the DOM3 level event:
- Click
- DblClick
- MouseDown: When the user presses any mouse button trigger, cannot trigger this event through the keyboard;
- MouseUp: Triggered when the user releases the mouse button, the event cannot be triggered by the keyboard;
- MouseMove: The event cannot be triggered by the keyboard;
- MouseEnter: Does not bubble, and the cursor moves to the descendant element does not trigger;
- MouseLeave: Does not bubble, and the cursor moves to the descendant element does not trigger;
- MouseOver: The cursor moves to the descendant element to trigger;
- Mouseout: The cursor moves to the descendant element to trigger;
Examples are as follows:
Div.onmouseover = function () {
console.log (' mouseover ');//triggers on child element
}
div.onmouseout = function () {
Console.log (' mouseout '); The
div.onmouseenter = function () {
console.log (' MouseEnter ')
is triggered on the child element; Div.onmouseleave = function () {
console.log (' MouseLeave ');//No trigger on child element
}
The Click event is triggered only if the MouseDown and MouseUp events are successively division on the same element, and the sequence DblClick event is triggered only if the Click event is triggered two times.
The order is as follows:
MouseDown--> mouseup--> Click--> mousedown--> mouseup--> Click--> DblClick
There is a bug in the previous version of IE8, and in the double-click Event, the second MouseDown and click events are skipped
Third, the wheel event
1. client area coordinates position CLIENTX and Clienty properties
Such as:
Window.onmousemove = function () {
Clickx = Event.clientx;
Clicky = Event.clienty;
var div = document.createelement ("img");
DIV.SRC = "Hhh.gif"
div.style.position = "absolute";
Div.style.width = ' 100px ';
Div.style.left = Clickx + "px";
Div.style.top = clicky + "px";
Document.body.appendChild (div);
2, page coordinates position Pagex and pagey;
Window.onclick = function () {
Clickx = Event.pagex;
Clicky = Event.pagey;
var div = document.createelement ("img");
DIV.SRC = "Ppp.png"
div.style.position = "absolute";
Div.style.width = ' 100px ';
Div.style.left = Clickx + "px";
Div.style.top = clicky + "px";
Document.body.appendChild (div);
This page coordinate position is not supported in IE8 and earlier versions and can be computed using the ScrollLeft and ScrollTop properties in mixed-mode document.body and document.documentelement in standard mode:
if (Clickx = = undefined) {
Clickx = event.clientx + (Document.body.scrollLeft | | document.documentElement.scrollLeft);
};
if (clicky = = undefined) {
clicky = event.clienty + (Document.body.scrollTop | | document.documentElement.scrollTop) ;
};
3, screen coordinates position Screenx and screeny;
This property enables you to obtain coordinates relative to the screen.
4, modify the key
The modifier keys have shift, Ctrl, ALT, Meta (Windows key on window, cmd key on Apple), and the corresponding modifier key states are Shiftkey, Ctrlkey, Altkey, Metakey, which contain Boolean values, True if the corresponding key is pressed, false otherwise. Such as:
var array = [];
var timing = settimeout (showarray, MB);
Window.onclick = function () {
if (event.shiftkey) {
array.push ("shift");
if (event.ctrlkey) {
array.push ("Ctrl");
if (event.altkey) {
Array.push ("alt");
};
if (event.metakey) {
array.push ("meta");
};
function Showarray () {
var str = array.tostring ();
var newp = document.createelement ("P");
Newp.appendchild (document.createTextNode (str));
Document.body.appendChild (NEWP);
Timing = settimeout (Showarray, 1000);
}
5. Related elements
event.relatedtarget and event.target;
The Relatedtarget property provides information about the related element. This property contains only values for MouseOver and mouseout events, and for other events, the NULL;IE8 version does not support Relatedtarget properties, and when the MouseOver event is triggered, The related elements are preserved in the Fromelement property of IE, and in the Toelement property of IE when the Mouseout event is triggered.
Such as:
var dot = document.getElementById ("dot");
Dot.onmouseout = function () {
Console.log ("Mouse out of" + Event.target.tagName + "to" + event.relatedTarget.tagNam e);
};
Such as:
function Getrelatedtarget () {
if (event.ralatedtarget) {return
event.relatedtarget;
} else if ( Event.toelement) {return
event.toelement.
} else if (event.fromelement) {return
event.fromelement;
} else {return
null;
}
}
Four, mouse button
1, Button Properties
The Event.button property of the DOM has three values: 0 for the primary mouse button, 1 for the middle mouse button, and 2 for the secondary mouse button. In the general settings, the primary mouse button is the left mouse buttons, and the secondary mouse button is the right mouse click.
The Button property is also available in the IE8 and previous versions, but the value of this property differs significantly from the Button property of the DOM:
- 0: Did not press the mouse button;
- 1: the main mouse button;
- 2: The second mouse button;
- 3: Simultaneously press the main mouse button and the second mouse button;
- 4: middle mouse button;
- 5: Simultaneously press the primary mouse button and the middle mouse button;
- 6: Press the next mouse button and the middle mouse button at the same time;
- 7: Press three mouse buttons at the same time
Compatible version:
function Getbutton () {
if (document.implementation.hasFeature ("Mouseevents", "2.0")) {return
Event.button ;
} else {
switch (Event.button) {case
0: Case
1: Case
3: Case
5: Case
7: return
0;
Case 2: Case
6: Return
2;
Case 4: Return
1;
}
}
In addition, if you want to mask the right mouse button, you should use:
Document.oncontextmenu = function (event) {
//if (window.event) {
// event = window.event;
//
try {
// var = event.srcelement; if (!) ( (The.tagname = = "INPUT" && the.type.toLowerCase () = = "text") | | The.tagname = = "TEXTAREA")) {
//return false; }
//return true;
catch (E) {
//return false;
return
false;
}
This event is HTML5 defined and discussed later.
2. More Event information
Detail Property
For mouse events, detail contains a number that indicates how many clicks (once MouseDown and MouseUp) have occurred at a given position, counting from 1, and if the position between MouseDown and MouseUp is moved, the detail will be reset 0 , if the click Interval is too long, it is reset to 0.
3. Mouse wheel Event
MouseWheel Events and Wheeldelta properties
When you scroll the page vertically, it triggers the Wheeldelta property in the Mousewheel,event object to indicate that the Wheeldelta is a multiple of 120 when the user rolls the wheel forward, and the Wheeldelta is a multiple of 120 when the wheel is rolled back. Such as:
var clientheight = document.documentElement.clientHeight;
var divs = document.getelementsbytagname ("div");
for (var i = 0; i < divs.length i++) {
divs[i].style.height = clientheight + "px";
};
Window.onmousewheel = function () {
if (Event.wheeldelta <= -120) {
Window.scrollby (0,clientheight);
} else if (Event.wheeldelta >=) {
Window.scrollby (0,-clientheight);}
;
}
In addition, in the previous version of Opera 9.5, the Wheeldelta value was reversed.
In addition, Firefox supports a similar event named Dommousescroll and division when the mouse scrolls the wheel. Information about the mouse wheel is saved in the Detail property. Scroll forward the value of this property to a multiple of 3, scrolling backwards, and the value of this property is a multiple of 3.
General Edition:
function Getwheeldelta () {
if (Event.wheeldelta) {return
(Client.engine.opera && Client.engine.opera < 9.5? -event.wheeldelta:event.wheeldelta);
} else {
return-event.detail *;}
;
}
4, Touch equipment
iOS and Android devices:
- does not support DblClick;
- Clicking an element triggers the MouseMove, and if this action causes the content to change, no other event will be audible; if the screen doesn't change, then the MouseDown, MouseUp, and click events occur sequentially;
- MouseMove events also trigger mouseover and mouseout events;
- Two finger operation will trigger mousewheel and scroll;
5. Accessibility problems
- Executes code using the Click event;
- Do not use onmouseover to display new information to the user;
- Do not use DblClick to perform important operations;
The above is the entire content of this article, I hope to help you learn.