Focus, mouse, and scroll event details in JavaScript event types, javascript scroll wheel

Focus, mouse, and scroll event details in JavaScript event types, javascript scroll wheel

This article describes the important points of attention for "Focus, mouse, and scroll wheel events" under "Event Type" in JavaScript events and shares them with you for your reference. The specific content is as follows:

I. Focus events

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

Ii. mouse events

DOM3 events define nine mouse events:

• Click
• Dblclick
• Mousedown: triggered when you press any mouse button. This event cannot be triggered through the keyboard;
• Mouseup: triggered when you release the mouse button. This event cannot be triggered through the keyboard;
• Mousemove: you cannot trigger this event through the keyboard;
• Mouseenter: Do not bubble, and the cursor is not triggered when it is moved to the child element;
• Mouseleave: Do not bubble, and the cursor is not triggered when it is moved 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.

Iii. scroll wheel events

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

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

3. screenX and screenY;

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

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

5. Related Elements

Event. relatedTargetAndEvent.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;  }}

Iv. mouse buttons

1. button attributes

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.

2. More event information

DetailAttribute

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.

3. scroll wheel events

MousewheelEvents andWheelDeltaAttribute

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

4. Touch devices

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;
  

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

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Javascript scroll wheel event
• 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
• Analysis of javascript mouse wheel event monitoring
• Js controls mouse event movement and removal effect display