JavaScript 이벤트 유형_javascript 기술의 포커스, 마우스 및 휠 이벤트에 대한 자세한 설명

본 글에서는 자바스크립트 이벤트의 '이벤트 유형' 항목에 '포커스, 마우스, 휠 이벤트'의 핵심 사항을 정리하여 참고할 수 있도록 공유합니다

1. 집중 이벤트

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

• 흐림: 요소가 초점을 잃고 버블링되지 않습니다.
• DOMFocusIn: HTML 이벤트 포커스와 동일하며 DOM3에서는 폐기됨, focusin 사용
• DOMFocusOut: HTML 이벤트 블러와 동일하며 DOM3에서는 폐기됨, 포커스 아웃 사용
• 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 --> focus --> DOMFocusIn

2. 마우스 이벤트

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

• 클릭
• dbl클릭
• mousedown: 사용자가 마우스 버튼을 누를 때 트리거됩니다. 이 이벤트는 키보드를 통해 트리거될 수 없습니다. mouseup: 사용자가 마우스 버튼을 놓을 때 트리거됩니다. 이 이벤트는 키보드를 통해 트리거될 수 없습니다.
• mousemove: 이 이벤트는 키보드를 통해 실행될 수 없습니다.
• mouseenter: 버블링되지 않으며 커서가 하위 요소로 이동할 때 트리거되지 않습니다. mouseleave: 버블링되지 않으며 커서가 하위 요소로 이동할 때 트리거되지 않습니다.
• mouseover: 커서가 하위 요소로 이동할 때 트리거됩니다.
• mouseout: 커서가 하위 요소로 이동할 때 트리거됩니다.
• 예:
• 동일한 요소에서 mousedown 및 mouseup 이벤트가 연속적으로 나누어질 때만 click 이벤트가 발생하고, click 이벤트가 두 번 발생하는 경우에만 dblclick 이벤트가 순차적으로 발생합니다. 순서는 다음과 같습니다.
  
mousedown --> mousedown --> 클릭 -->

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

3. 롤러 이벤트

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

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

예:

2. 페이지 좌표 위치는 pageX와 pageY입니다.

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

3. 화면 좌표 위치 screenX 및 screenY

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

4. 수정 키

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

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

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

5. 관련 요소

event.관련Target

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

및

event.target

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

예:

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

예:

四、鼠标按钮

1、button属性

DOM的event.button属性有三个值：0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中，主鼠标按钮就是鼠标左键；次鼠标按钮就是鼠标右键。

IE8及之前的版本也提供了button属性，但这个属性的值与DOM的button属性有很大差异：

• 0：没有按下鼠标按钮；
  
• 1：主鼠标按钮；
  
• 2：次鼠标按钮；
  
• 3：同时按下主鼠标按钮和次鼠标按钮；
  
• 4：中间鼠标按钮；
  
• 5：同时按下主鼠标按钮和中间鼠标按钮；
  
• 6：同时按下次鼠标按钮和中间鼠标按钮；
  
• 7：同时按下三个鼠标按钮
  

兼容版：

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定义的，以后再讨论

2、更多的事件信息

detail属性

对于鼠标事件来说，detail包含了一个数值，表示在给定位置上发生了多少次单击（一次mousedown和一次mouseup），次数从1开始计数，如果mousedown和mouseup之间移动了位置，detail会被重置0，如果单击间隔太长也会被重置为0.

3、鼠标滚轮事件

mousewheel事件和wheelDelta属性

在垂直放向上滚动页面时，就会触发mousewheel，event对象里面的wheelDelta属性则表示当用户向前滚动滚轮时，wheelDelta是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;
  };
}

4、触摸设备

iOS和Android设备中：

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

5、无障碍性问题

• 使用click事件执行代码；
• 不要使用onmouseover向用户显示新的信息；
• 不要使用dblclick执行重要的操作；

以上就是本文的全部内容，希望对大家的学习有所帮助。