자바스크립트 포커스 이벤트, 마우스 이벤트, 스크롤 휠 이벤트_javascript 스킬 사용에 대한 자세한 설명

포커스 이벤트

일반적으로 이러한 이벤트는 document.hasFocus() 메서드 및 document.activeElement 속성과 함께 사용됩니다. 주로 다음을 포함합니다:

흐림: 요소가 초점을 잃고 버블링되지 않습니다.
DOMFocusIn: HTML 이벤트 포커스와 동일하며 DOM3에서는 폐기되었습니다. focusin을 사용하세요.
DOMFocusOut: HTML 이벤트 블러와 동일하며 DOM3에서는 폐기되었으며 focusout을 사용합니다.
focus: 요소가 포커스를 받고 다시 버블링되지 않습니다.
focusin: 포커스를 얻습니다. HTML 이벤트 포커스와 동일하지만 버블링됩니다.
focusout: 포커스를 잃습니다. HTML 이벤트 흐림과 동일합니다.
예:

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

포커스가 페이지의 한 요소에서 다른 요소로 이동하면 다음 이벤트가 트리거됩니다.

focusout --> focusin --> DOMFocusOut --> DOMFocusIn

마우스 이벤트

9개의 마우스 이벤트가 DOM 레벨 3 이벤트에 정의되어 있습니다.

click
dblclick
mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件；
mouseup：用户释放鼠标按钮时触发，不能通过键盘触发这个事件；
mousemove：不能通过键盘触发这个事件；
mouseenter：不冒泡，且光标移动到后代元素上不会触发；
mouseleave：不冒泡，且光标移动到后代元素上不会触发；
mouseover：光标移动到后代元素上会触发；
mouseout：光标移动到后代元素上会触发；

예:

div.onmouseover = function() {
  console.log('mouseover'); //在子元素上会触发
}
div.onmouseout = function() {
  console.log('mouseout'); //在子元素上会触发
}
div.onmouseenter = function() {
  console.log('mouseenter'); //在子元素上不会触发
}
div.onmouseleave = function() {
  console.log('mouseleave'); //在子元素上不会触发
}

동일한 요소에서 mousedown 및 mouseup 이벤트가 연속적으로 나누어질 때만 click 이벤트가 발생하고, click 이벤트가 두 번 발생하는 경우에만 dblclick 이벤트가 순차적으로 발생합니다.

순서는 다음과 같습니다.

mousedown --> mouseup --> click --> mouseup --> 클릭

IE8 이전 버전에서는 더블클릭 이벤트에서 두 번째 마우스다운과 클릭 이벤트를 건너뛰는 버그가 있습니다

휠 이벤트

클라이언트 영역 좌표 위치 clientX 및 clientY 속성

예:

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

페이지 좌표 위치 pageX 및 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);
};

이 페이지 좌표 위치는 IE8 및 이전 버전에서는 지원되지 않습니다. 혼합 모드에서는 document.body의 scrollLeft 및 scrollTop 속성을 사용하고 표준 모드에서는 document.documentElement를 사용하여 계산할 수 있습니다.

if (clickX === undefined) {
  clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
};
if (clickY === undefined) {
  clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
};

화면 좌표 위치 screenX 및 screenY;

이 속성을 통해 화면을 기준으로 한 좌표를 얻을 수 있습니다.

수정 키

수정 키에는 Shift, Ctrl, Alt 및 Meta(Windows의 경우 Windows 키, Mac의 경우 Cmd 키)가 포함됩니다. 해당 수정자 키 상태는 ShiftKey, CtrlKey, AltKey 및 MetaKey입니다. 해당 키를 누르면, 그렇지 않으면 거짓입니다. 예:

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

관련 요소

event.관련Target 및 event.target

관련 타겟 속성은 관련 요소에 대한 정보를 제공합니다. 이 속성에는 다른 이벤트의 경우에만 해당 값이 null입니다. IE8 이전 버전에서는 mouseover 이벤트가 트리거되면 관련 요소가 IE의 fromElement 속성에 저장됩니다. ; mouseout 이벤트가 트리거되면 관련 요소가 IE의 toElement 속성에 저장됩니다.

예:

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

예:

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

마우스 버튼

버튼 속성

DOM의 event.button 속성에는 기본 마우스 버튼에 0, 마우스 가운데 버튼에 1, 보조 마우스 버튼에 2라는 세 가지 값이 있습니다. 일반 설정에서 기본 마우스 버튼은 왼쪽 마우스 버튼이고 보조 마우스 버튼은 오른쪽 마우스 버튼입니다.

IE8 및 이전 버전도 버튼 속성을 제공하지만 이 속성의 값은 DOM 버튼 속성과 매우 다릅니다.

0: 마우스 버튼을 누르지 않았습니다.

1: 메인 마우스 버튼
2: 보조 마우스 버튼
3: 기본 마우스 버튼과 보조 마우스 버튼을 동시에 누르세요.
4: 가운데 마우스 버튼
5: 마우스 메인 버튼과 마우스 가운데 버튼을 동시에 누르세요.
6: 두 번째 마우스 버튼과 마우스 가운데 버튼을 동시에 누르세요.
7: 마우스 버튼 3개를 동시에 누르기

호환 버전:

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

또한 마우스 오른쪽 버튼을 차단하려면 다음을 사용해야 합니다.

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

이 이벤트는 HTML5에 의해 정의되며 나중에 논의됩니다

이벤트 정보 더보기

세부 속성

마우스 이벤트의 경우 세부정보에는 특정 위치에서 발생한 클릭 수(mousedown 1회, mouseup 1회)를 나타내는 값이 포함됩니다. 숫자는 1부터 계산됩니다. 위치가 mousedown과 mouseup 사이에서 이동한 경우 세부정보가 재설정됩니다. 0으로, 클릭 간격이 너무 길면 0으로 재설정됩니다.

마우스휠 이벤트

마우스휠 이벤트 및 WheelDelta 속성

사용자가 페이지를 세로로 스크롤하면 이벤트 개체의 휠Delta 속성이 트리거됩니다. 이는 사용자가 휠을 앞으로 굴릴 때 휠Delta가 120의 배수라는 것을 의미합니다. 휠델타(wheelDelta)는 -120의 배수입니다. 예:

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

另外，在Opera 9.5之前的版本中，wheelDelta值的正负号是颠倒的。

此外，Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚动滚轮时除法。有关鼠标滚轮的信息保存在detail属性中。向前滚动这个属性的值为-3的倍数，向后滚动，这个属性的值是3的倍数。

通用版：

function getWheelDelta() {
  if (event.wheelDelta) {
    return (client.engine.opera && client.engine.opera < 9.5 &#63; -event.wheelDelta : event.wheelDelta);
  } else {
    return -event.detail * 40;
  };
}

触摸设备

iOS和Android设备中：

不支持dblclick；
轻击可单击元素会触发mousemove；如果此操作会导致内容变化，将不再有其他事件发声；如果屏幕没有发生变化，那么依次发生mousedown、mouseup和click事件；
mousemove事件也会触发mouseover和mouseout事件；
两个手指操作会触发mousewheel和scroll；

无障碍性问题

使用click事件执行代码；

不要使用onmouseover向用户显示新的信息；
不要使用dblclick执行重要的操作；