JavaScript focus event, mouse event and scroll event usage details, and javascript Usage Details

JavaScript focus event, mouse event and scroll event usage details, and javascript Usage Details

Focus event

These events are generally used in combination with the document. hasFocus () method and the document. activeElement attribute. Mainly include:

Blur: the element loses focus and does not bubble up;
DOMFocusIn: Same as the HTML Event focus, which was deprecated in DOM3. focusin is used;
DOMFocusOut: Same as the HTML event blur, which was deprecated in DOM3. Select focusout;
Focus: The element gets the focus and does not bubble back;
Focusin: obtains the focus, which is equivalent to the focus of an HTML event, but is bubbling;
Focusout: loses focus, which is equivalent to the HTML event blur;
For example:

window.onfocus = function () {  console.log('focus'); //focus  console.log(document.hasFocus()); //True}window.onblur = function () {  console.log('blur'); //blur  console.log(document.hasFocus()); //False}

When the focus is transferred from one element on the page to another, the following event is triggered:

Focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

Mouse events

DOM3 events define nine mouse events:

Clickdblclickmousedown: this event is triggered when you press any mouse button. It cannot be triggered by the keyboard. mouseup: this event is triggered when you release the mouse button. mousemove: this event cannot be triggered through the keyboard; mouseenter: no bubbles, and the cursor is not triggered when it moves to the child element; mouseleave: no bubbles, and the cursor is not triggered when it moves to the child element; mouseover: it is triggered when the cursor moves to the descendant element; mouseout: It is triggered when the cursor moves to the descendant element;

Example:

Div. onmouseover = function () {console. log ('mouseover'); // triggered on the child element} div. onmouseout = function () {console. log ('mouseout'); // triggered on the child element} div. onmouseenter = function () {console. log ('mouseenter'); // The sub-element will not trigger} div. onmouseleave = function () {console. log ('mouseleave '); // it will not be triggered on the child element}

The click event is triggered only when the mousedown and mouseup events are divided one by one on the same element. The dblclick event is triggered only when two click events are triggered.

The order is as follows:

Mousedown --> mouseup --> click --> dblclick

A bug exists in versions earlier than IE8. In the double-click event, the second mousedown and click events are skipped.

Scroll wheel event

Client region coordinate position clientX and clientY attributes

For example:

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

ScrollLeft and scrollTop attributes in umentElement:

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 coordinate positions screenX and screenY;

You can use this property to obtain the coordinates relative to the screen.

Modify key

The modification keys include Shift, Ctrl, Alt, and Meta (Windows keys on Windows, Cmd keys on Apple). The modification keys are in the shiftKey, ctrlKey, altKey, and metaKey states, these attributes contain boolean values. If the corresponding key is pressed, the value is true; otherwise, the value is false. For example:

var array = [];var timing = setTimeout(showArray, 100);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.relatedtargetand event.tar get;

The relatedTarget attribute provides information about related elements. This attribute only contains values for mouseover and mouseout events, and null for other events. Versions earlier than IE8 do not support the relatedTarget attribute. When a mouseover event is triggered, the fromElement attribute of IE stores related elements. When the mouseout event is triggered, the toElement attribute of IE stores related elements.

For example:

var dot = document.getElementById("dot");dot.onmouseout = function (){  console.log("mouse out from" + event.target.tagName + "to" + event.relatedTarget.tagName);};

For example:

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 Properties

The event. button attribute of DOM has three values: 0 as the primary mouse button, 1 as the intermediate mouse button, and 2 as the secondary mouse button. In general settings, the primary mouse button is the left mouse button, and the secondary mouse button is the right mouse.

IE8 and earlier versions also provide the button attribute, but the value of this attribute is very different from that of the DOM button attribute:

0: No mouse button is pressed;
1: Master and mouse buttons;
2: mouse button;
3: simultaneously press the master and secondary mouse buttons;
4: middle mouse button;
5: simultaneously press the master mouse button and the middle mouse button;
6: simultaneously press the next mouse button and the middle mouse button;
7. Press the 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 shield the right mouse, you should use:

document.oncontextmenu = function(event) {  // if (window.event) {  //   event = window.event;  // }  // try {  //   var the = 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 defined in HTML5 and will be discussed later.

More event information

Detail attributes

For a mouse event, detail contains a value indicating the number of clicks (one mousedown and one mouseup) at a given position. The count starts from 1, if the position is moved between mousedown and mouseup, the value of detail is reset to 0. If the interval is too long, the value is reset to 0.

Scroll wheel event

Mousewheel event and wheelDelta attribute

When you scroll the page vertically up, the mousewheel is triggered. The wheelDelta attribute in the event object indicates that when you scroll the scroll wheel forward, the wheelDelta is a multiple of 120. When you scroll the scroll wheel backward, wheelDelta is a multiple of-120. For example:

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 >= 120){    window.scrollBy(0,-clientHeight);  };}

In versions earlier than Opera 9.5, the positive and negative numbers of the wheelDelta value are reversed.

In addition, Firefox supports a similar event named DOMMouseScroll, which is also a division when the scroll wheel is clicked. Information about the scroll wheel is saved in the detail attribute. Scroll forward. The value of this attribute is a multiple of-3 and scroll backward. The value of this attribute 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 * 40;  };}

Touch Device

In iOS and Android devices:

Dblclick is not supported;
Click the element to trigger mousemove. If this operation changes the content, no other events will be reported. If the screen does not change, the mousedown, mouseup, and click events will occur in sequence;
The mousemove event also triggers the mouseover and mouseout events;
Two Finger operations will trigger mousewheel and scroll;

Accessibility

Use the click event to execute code;

Do not use onmouseover to display new information to users;
Do not use dblclick to perform important operations;

Articles you may be interested in:

• Javascript mouse event Summary
• Details about the scroll wheel event in js (multiple firefox browsers)
• Js is compatible with multiple browser carriage return and mouse focus Event code (IE6/7/8, firefox, chrome)
• JS mouse events recommended favorites
• Introduction to JS scroll event onmousewheel
• Analysis of javascript mouse wheel event monitoring
• Js controls mouse event movement and removal effect display