JavaScript focus events, mouse events, and wheel events use the detailed _javascript tips

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

Mouse events

9 mouse events are defined in the DOM3 level event:

Click
DblClick
MouseDown: Triggered by the user pressing any mouse button, the event cannot be triggered by the keyboard;
MouseUp: When the user releases the mouse button, the trigger cannot trigger the event
through the keyboard; MouseMove: This event cannot be triggered by the keyboard;
MouseEnter: Not bubbling, and the cursor will not be triggered on the descendant element;
MouseLeave: Not bubbling, and the cursor moving to the descendant element will not trigger;
MouseOver: The cursor is moved to the descendant element;
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 ');//triggers on child elements
}
Div.onmouseenter = function () {
  console.log (' MouseEnter ');////No trigger on 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

Wheel Event

client area coordinate 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);

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) ;
};

Screen coordinates position Screenx and screeny;

This property enables you to obtain coordinates relative to the screen.

Modify 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);
}

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;
  }
}

mouse button

Button Property

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.

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.

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 *;}
  ;
}

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;

Accessibility issues

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;