브라우저에서 일반적으로 사용되는 5가지 이벤트 분석

이 글은 브라우저에서 일반적으로 사용되는 이벤트 분석에 대한 내용을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

양식 이벤트

키보드 이벤트

<input>, <textarea> 값이 변경되면 트리거됩니다. 또한 contenteditable 속성이 있는 요소의 값이 켜질 때마다 입력 이벤트도 트리거됩니다. 입력 이벤트의 한 가지 특징은 지속적으로 트리거된다는 것입니다. 예를 들어 사용자가 버튼을 누를 때마다 입력 이벤트가 트리거됩니다.

이러한 이벤트에는 keydown, keyup,

Mouse 이벤트

<input>, <textarea>에서 중국어를 선택할 때 발생하는 이벤트가 포함됩니다.

change 이벤트는 <input>, , <textarea> 값이 변경되면 트리거됩니다. 입력 이벤트와 가장 큰 차이점은 지속적으로 트리거되지 않고 모든 수정이 완료된 경우에만 트리거되며 입력 이벤트는 필연적으로 변경 이벤트를 트리거한다는 것입니다. 구체적으로 다음과 같은 상황으로 구분됩니다.

• 라디오 또는 체크박스가 활성화되면 트리거됩니다.

• 사용자가 제출할 때 트리거됩니다. 예를 들어, 다음 목록에서 선택을 완료(select)하고, 날짜 또는 파일 입력 상자에서 선택을 완료합니다.

• 텍스트 상자 또는 텍스트 영역 요소의 값이 변경되고 포커스가 손실될 때 실행됩니다.

• 양식이 재설정되면 양식 요소에 의해 재설정 이벤트가 트리거됩니다(모든 양식 구성원이 기본값으로 다시 변경됨).

• submit 이벤트는 양식 데이터가 서버에 제출될 때 양식 요소에 의해 트리거됩니다.

Document 이벤트:

beforeunload

beforeunload 창이 닫히려고 할 때 이벤트 또는 문서 웹 리소스가 언로드되려고 할 때 트리거됩니다. 사용자가 실수로 웹 페이지를 닫는 것을 방지하는 데 사용할 수 있습니다. 이 이벤트의 기본 동작은 현재 창이나 문서를 닫는 것입니다. 리스닝 함수에서 event.preventDefault()가 호출되거나 이벤트 객체의 returnValue 속성에 null이 아닌 값이 할당되면 사용자가 웹 페이지를 닫을지 여부를 확인할 수 있는 확인 상자가 자동으로 팝업됩니다. 사용자가 "취소" 버튼을 클릭하면 웹페이지가 닫히지 않습니다. 청취 함수에서 반환된 문자열은 확인 대화 상자에 표시됩니다.

  window.addEventListener('beforeunload', function(event) {
    if(event.preventDefault){
      event.preventDefault();
    } else {
      event.returnValue = '你确认要离开吗？';
    }
  });

unload 및 load

unload 이벤트는 창이 닫히거나 문서 개체가 실행될 때 트리거됩니다. 언로드하려고 합니다. 창, 본문, 프레임셋 등과 같은 개체에서 발생합니다. 트리거 순서는 beforeunload 및 pagehide 이벤트 뒤에 있습니다. 언로드 이벤트는 페이지가 브라우저에 의해 캐시되지 않은 경우에만 트리거됩니다. 즉, "앞으로/뒤로"를 눌러 페이지가 언로드되면 언로드 이벤트가 트리거되지 않습니다. 언로드 이벤트가 발생하면 문서 객체는 특수한 상태가 됩니다. 모든 리소스는 여전히 존재하지만 사용자에게 표시되지 않으며 모든 UI 상호 작용(window.open, 경고, 확인 메서드 등)이 유효하지 않습니다. 이때 오류가 발생하더라도 문서 언로드를 중지할 수 없습니다.

페이지가 성공적으로 로드되면 로드 이벤트가 트리거되고, 페이지 로드에 실패하면 오류 이벤트가 트리거됩니다. 페이지는 브라우저 캐시에서 로드되며 로드 이벤트를 트리거하지 않습니다.

이 두 이벤트는 실제로는 진행 이벤트로 문서 개체뿐만 아니라 다양한 외부 리소스에서도 발생합니다. 웹 브라우징은 이미지, 스타일 시트, 스크립트, 비디오, 오디오, Ajax 요청(XMLHttpRequest) 등과 같은 다양한 리소스를 로드하는 프로세스입니다. 이러한 리소스, 문서 개체, 창 개체 및 XMLHttpRequestUpload 개체는 로드 이벤트 및 오류 이벤트를 트리거합니다.

pageshow 및 pagehide

pageshow 이벤트, pagehide 이벤트: 기본적으로 브라우저는 사용자가 "앞으로/ 뒤로" 버튼을 클릭하면 브라우저가 캐시에서 페이지를 로드합니다.
pageshow 이벤트는 첫 번째 로드 및 캐시에서 로드를 포함하여 페이지가 로드될 때 트리거됩니다. 페이지가 로드될 때마다(브라우저에서 캐시되는지 여부에 관계없이) 실행될 코드를 지정하려면 해당 코드를 이 이벤트의 수신 함수에 배치하면 됩니다. 처음 로드할 때 실행 순서는 로드 이벤트 뒤에 있습니다. 캐시에서 로드할 때 캐시의 페이지는 일반적으로 로드 이벤트의 수신 기능이 실행된 후와 같기 때문에 로드 이벤트가 트리거되지 않으므로 이를 반복할 필요가 없습니다. 마찬가지로 페이지가 캐시에서 로드되면 웹 페이지에서 초기화된 JavaScript 스크립트(예: DOMContentLoaded 이벤트의 수신 기능)가 실행되지 않습니다. pageshow 이벤트에는 부울 값을 반환하는 지속형 속성이 있습니다. 페이지가 처음으로 로드되면 이 속성은 false이고, 페이지가 캐시에서 로드되면 이 속성은 true입니다.

document.onpageshow = function(event){}
  if(event.persisted){
    //如果存缓存加载
  }
}

마찬가지로 이 속성을 true로 설정하면 페이지가 캐시에 저장된다는 의미이고, false로 설정하면 이 때 페이지가 캐시에 저장되지 않는다는 의미입니다. unload 이벤트에 대한 함수가 설정되면 이 함수는 pagehide 이벤트 직후에 실행됩니다. 페이지에 프레임이 포함되어 있으면 프레임 페이지의 pageshow 이벤트와 pagehide 이벤트가 기본 페이지보다 먼저 트리거됩니다.

DOMContentLoaded 和 readystatechange

DOMContentLoaded 事件当 HTML 文档下载并解析完成以后，就会在 document 对象上触发 DOMContentLoaded 事件。这时，仅仅完成了 HTML 文档的解析(整张页面的DOM生成)，所有外部资源(样式表, 脚本, iframe等等)可能还没有下载结束。也就是说，这个事件比 load 事件，发生时间早得多。注意，网页的 JavaScript 脚本是同步执行的，所以定义 DOMContentLoaded 事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发 DOMContentLoaded 事件。此外，IE8 不支持 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。

readystatechange 事件发生在 Document 对象和 XMLHttpRequest 对象，当它的 readyState 属性发生变化时触发。

其他文档级事件

上面重点提到了 DOMContentLoaded, readystatechange, pageshow, pagehide, unload, load 和 beforeunload 事件，此外还有一下事件:

• onafterprint: 文档打印之后运行的脚本

• onbeforeprint: 文档打印之前运行的脚本

• onbeforeunload: 文档卸载之前运行的脚本(上文已涉及)

• onerror: 在错误发生时运行的脚本

• onhaschange: 当文档已改变时运行的脚本

• onload: 页面结束加载之后触发(上文已涉及)

• onmessage: 在消息被触发时运行的脚本

• onoffline: 当文档离线时运行的脚本

• ononline: 当文档上线时运行的脚本

• onpagehide: 当窗口隐藏时运行的脚本(上文已涉及)

• onpageshow: 当窗口成为可见时运行的脚本(上文已涉及)

• onpopstate: 当窗口历史记录改变时运行的脚本

• onredo: 当文档执行撤销（redo）时运行的脚本

• onresize: 当浏览器窗口被调整大小时触发

• onstorage: 在 Web Storage 区域更新后运行的脚本

• onundo: 在文档执行 undo 时运行的脚本

• onscroll: 事件在文档或文档元素滚动时执行脚本

鼠标事件 与 MouseEvent对象

new MouseEvent(typeArg, mouseEventInit);

内置的鼠标事件包括:

1. mousedown: 按下鼠标

2. mouseup: 鼠标抬起

3. click: 点击

4. dblclick: 双击

5. mousemove: 鼠标移动

6. mouseover: 鼠标移入，冒泡

7. mouseout: 鼠标移出，冒泡

8. mouseenter: 鼠标移入，不冒泡

9. mouseleave: 鼠标移出，不冒泡

10. contextmenu: 右键菜单

11. wheel: 滚轮事件

其具有如下常用属性:

• altKey，ctrlKey，metaKey，shiftKey属性返回一个布尔值，表示鼠标事件发生时，是否按下某个键；

• button 返回事件的鼠标键信息, 值为0(左键), 1或4(中键, 4为IE中的值)，2(右键)，可通过switch来选择执行分之)；

• buttons 属性返回一个3个比特位的值，表示同时按下了哪些键

• clientX，clientY 返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素

• screenX，screenY 返回鼠标位置相对于屏幕左上角的坐标，单位为像素

• movementX，movementY 返回一个位移，单位为像素，表示当前位置与上一个 mousemove 事件之间的距离，在数值上:

currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
currentEvent.movementY = currentEvent.screenY - previousEvent.screenY

• relatedTarget属性返回事件的次要相关节点，即和target属性对应的节点，如: mouseout target 指将要离开的节点，relatedTarget 指将要进入的节点。对于那些没有次要相关节点的事件，该属性返回null

• wheel 事件是与鼠标滚轮相关的事件，浏览器提供一个 WheelEvent 构造函数 new WheelEvent(typeArg, mouseEventInit)

• deltaX: 返回一个数值，表示滚轮的水平滚动量

• deltaY: 返回一个数值，表示滚轮的垂直滚动量

• deltaZ: 返回一个数值，表示滚轮的Z轴滚动量

• deltaMode: 返回一个数值，表示滚动的单位，适用于上面三个属性。0表示像素，1表示行，2表示页

键盘事件 KeyboardEvent 对象

构造函数 new KeyboardEvent(typeArg, KeyboardEventInit)

键盘事件包括keydown(按下键盘时触发该事件)，keypress(只要按下的键并非Ctrl, Alt, Shift和Meta，就接着触发keypress事件), keyup(松开键盘时触发该事件)

• altKey，ctrlKey，metaKey，shiftKey: 返回一个布尔值，表示是否按下对应的键

• key: 返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名

• keyCode: 返回按键的 ASCII 码，注意: 这里是不区分大小写的，A键不论输出 A 还是 a keyCode 都是68。在 IE 中使用 witch 属性

进度事件 ProgressEvent对象

new ProgressEvent(type, {
  lengthComputable: aBooleanValue,    // false as default
  loaded: aNumber,                    // 0 as default
  total: aNumber                      // 0 as default
});

进度事件用来描述一个事件进展的过程，比如XMLHttpRequest对象发出的HTTP请求的过程, <img>, <audio>, <video>, <style>, <link>加载外部资源的过程，包括下载和上传。通常包括以下事件:

1. abort事件: 当进度事件被中止时触发。如果发生错误，导致进程中止，不会触发该事件。

2. error事件: 由于错误导致资源无法加载时触发，不会冒泡。error 事件的监听函数最好放在如 img 元素的 HTML 属性中。

3. load事件: 进度成功结束时触发。

4. loadstart事件: 进度开始时触发。

5. loadend事件: 进度停止时触发，发生顺序排在error事件abort事件load事件后面。loadend事件的监听函数可以用来取代abort事件/load事件/error事件的监听函数，loadend事件本身不提供关于进度结束的原因，但可以用它来做所有进度结束场景都需要做的一些操作。

6. progress事件: 当操作处于进度之中，由传输的数据块不断触发。

7. timeout事件: 进度超过限时触发

这类事件具有以下属性:

• lengthComputable: 返回一个布尔值，表示当前进度是否具有可计算的长度。如果为false，就表示当前进度无法测量。

• total: 返回一个数值，表示当前进度的总长度。如果是通过 HTTP 下载某个资源，表示内容本身的长度，不含 HTTP 头部的长度。如果 lengthComputable 属性为 false，则 total 属性就无法取得正确的值。

• loaded: 返回一个数值，表示当前进度已经完成的数量。该属性除以total属性，就可以得到目前进度的百分比。

//进度计算
if (e.lengthComputable){
  var percentComplete = e.loaded / e.total;
}

拖拽事件 DragEvent 对象

new DragEvent(type, DragEventInit);

拖拽指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。拖拽的对象有好几种，包括 Element 节点, 图片, 链接, 选中的文字等等。在 HTML 网页中，除了 Element 节点默认不可以拖拽，其他(图片, 链接, 选中的文字)都是可以直接拖拽的。为了让 Element 节点可拖拽，可以将该节点的 draggable 属性设为 true。draggable 属性可用于任何 Element 节点，但是图片(img 元素)和链接(a 元素)不加这个属性，就可以拖拽。对于它们，用到这个属性的时候，往往是将其设为 false，防止拖拽。注意，一旦某个 Element 节点的 draggable 属性设为 true，就无法再用鼠标选中该节点内部的文字或子节点了。

当Element节点或选中的文本被拖拽时，就会持续触发拖拽事件，包括以下一些事件:

1. drag事件: 拖拽过程中，在被拖拽的节点上持续触发。

2. dragstart事件: 拖拽开始时在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。通常应该在这个事件的监听函数中，指定拖拽的数据。

3. dragend事件: 拖拽结束时(释放鼠标键或按下escape键)在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。它与dragStart事件，在同一个节点上触发。不管拖拽是否跨窗口，或者中途被取消，dragend事件总是会触发的。

4. dragenter事件: 拖拽进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下(drop)拖拽的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拽进入当前节点，也是在这个事件的监听函数中设置。

5. dragover事件: 拖拽到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拽事件的效果(DataTransfer对象的dropEffect属性)为none，即不允许放下被拖拽的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拽效果为none。

6. dragleave事件: 拖拽离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拽离开当前节点，就在这个事件的监听函数中设置。

7. drop事件: 被拖拽的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拽数据，并进行相关处理。

关于拖拽事件，有以下几点注意事项:

1. 拖拽过程只触发以上这些拖拽事件，尽管鼠标在移动，但是鼠标事件不会触发。

2. 将文件从操作系统拖拽进浏览器，不会触发 dragStart 和 dragend 事件。

3. dragenter 和 dragover 事件的监听函数，用来指定可以放下(drop)拖拽的数据。由于网页的大部分区域不适合作为 drop 的目标节点，所以这两个事件的默认设置为当前节点不允许 drop。如果想要在目标节点上 drop 拖拽的数据，首先必须阻止这两个事件的默认行为，或者取消这两个事件。

<p ondragover="return false">
//或
<p ondragover="event.preventDefault()">

1. 拖拽事件用一个 DragEvent 对象表示，该对象继承 MouseEvent 对象，DragEvent 对象只有一个独有的属性 dataTransfer，其他都是继承的属性。dataTransfer 属性用来读写拖拽事件中传输的数据，所有的拖拽事件都有一个 dataTransfer 属性，用来保存需要传递的数据，这个属性的值是一个 DataTransfer 对象。拖拽的数据保存两方面的数据: 数据的种类(又称格式)和数据的值。数据的种类是一个MIME字符串，比如 text/plain 或者 image/jpg，数据的值是一个字符串;

dataTransfer 对象的属性的值是一个对象，其中包括以下属性:

• dropEffect 属性: 设置放下(drop)被拖拽节点时的效果，可能的值包括 copy(复制被拖拽的节点), move(移动被拖拽的节点), link(创建指向被拖拽的节点的链接), none(无法放下被拖拽的节点)。设置除此以外的值，都是无效的。

• effectAllowed 属性: 设置本次拖拽中允许的效果，可能的值包括 copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized(默认值，等同于 all)。如果某种效果是不允许的，用户就无法在目标节点中达成这种效果。

• files 属性: 是一个 FileList 对象，包含一组本地文件，可以用来在拖拽操作中传送。如果本次拖拽不涉及文件，则属性为空的 FileList 对象。通过files属性读取拖拽文件的信息。如果想要读取文件内容，就要使用 FileReader 对象。

• types 属性: 是一个数组，保存每一次拖拽的数据格式，如'text/uri-list'

• setData() 方法: 用来设置事件所带有的指定类型的数据。它接受两个参数，第一个是数据类型，第二个是具体数据。如果指定的类型在现有数据中不存在，则该类型将写入types属性；如果已经存在，在该类型的现有数据将被替换。

event.dataTransfer.setData("text/plain", "Text to drag");

• getData() 方法接受一个字符串(表示数据类型)作为参数，返回事件所带的指定类型的数据(通常是用 setData 方法添加的数据)。如果指定类型的数据不存在，则返回空字符串。

event.dataTransfer.getData(types[0]);

• clearData() 方法接受一个字符串(表示数据类型)作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则原数据不受影响。

event.dataTransfer.clearData("text/uri-list");

• setDragImage() 可以用来自定义这张图片，它接受三个参数，第一个是img图片元素或者canvas元素，如果省略或为null则使用被拖动的节点的外观，第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。

event.dataTransfer.setDragImage(img, 0, 0);

触摸事件

 new Touch(touchInit);

触摸事件包括以下5种:

1. touchstart: 用户接触触摸屏时触发，它的 target 属性返回发生触摸的 Element 节点(IE10+中使用 mspointerdown 事件);

2. touchend: 用户不再接触触摸屏时(或者移出屏幕边缘时)触发，它的 target 属性与 touchstart 事件的 target 属性是一致的，它的 changedTouches 属性返回一个TouchList对象，包含所有不再触摸的触摸点(Touch对象)(IE10+中使用 mspointerup 事件);

3. touchmove: 사용자가 터치 포인트를 이동할 때 트리거됩니다. 해당 대상 속성은 터치시작 이벤트의 대상 속성과 일치합니다. 이 이벤트는 터치의 반경, 각도, 강도가 변경되는 경우에도 트리거됩니다. (mspointermove 이벤트는 IE10+에서 사용됩니다.);

4. touchenter: 터치 포인트가 요소에 들어갈 때 트리거됩니다. 이 이벤트에는 버블링 프로세스가 없습니다. (mspointerover 이벤트는 IE10+에서 사용됩니다);

5. touchleave: 터치 포인트가 요소를 떠날 때 트리거됩니다. 이 이벤트에는 버블링 프로세스가 없습니다. (IE10+에서는 mspointerout 이벤트 사용);

6. touchcancel: 어떤 이유로 터치 포인트가 중단될 때 트리거됩니다. 다음과 같은 여러 가지 이유가 있을 수 있습니다(구체적인 이유는 기기 및 브라우저에 따라 다름): (IE10+에는 해당 이벤트가 없습니다);

#🎜🎜 #

1. 이벤트로 인해 터치가 취소되었습니다. 예를 들어 모달 팝업 상자나 전화 통화로 인해 터치 프로세스가 중단되었습니다.

#🎜 🎜#연락처 문서 창을 떠나 브라우저의 인터페이스 요소, 플러그인 또는 기타 외부 콘텐츠 영역을 입력하면 TouchList의 가장 빠른 Touch 개체가 취소됩니다.
3. 터치 API는 세 가지 개체로 구성됩니다. 각 터치 개체는 터치 지점을 나타냅니다. 각 터치 지점은 위치, 크기, 모양, 압력 수준 및 대상 요소로 설명됩니다. TouchList 개체는 여러 터치 지점의 목록을 나타냅니다. 구체적으로 다음 속성을 포함합니다.

identifier 속성: 터치 인스턴스의 고유 식별자를 나타냅니다. 터치 프로세스 전반에 걸쳐 변경되지 않습니다(pointerId 속성은 IE10+에서 사용됨).

screenX/screenY 속성: 각각 왼쪽 상단을 기준으로 터치 포인트의 가로좌표를 나타냅니다. 페이지 스크롤 여부에 관계없이 화면 모서리와 세로 좌표
clientX/clientY 속성: 각각 위쪽을 기준으로 터치 포인트의 가로 좌표와 세로 좌표를 나타냅니다. 브라우저 뷰포트의 왼쪽 모서리, 페이지 스크롤 여부와는 아무 관련이 없습니다.
pageX/pageY 속성: 각각 터치 포인트의 가로 좌표와 세로 좌표를 나타냅니다. 페이지 스크롤 효과를 포함하여 현재 페이지의 왼쪽 상단 모서리를 기준으로 합니다. Displacement;
radiusX/radiusY 속성: X축과 Y축을 반환합니다. 각각 터치 포인트 주변의 영향을 받는 타원 범위(픽셀);
• # 🎜🎜#
  rotationAngle 속성: 터치 영역에서 타원의 회전 각도를 0에서 0 사이의 도 단위로 나타냅니다. 90도. 손가락 끝이 화면에 닿으면 터치 범위가 타원을 형성합니다. 이 세 가지 속성은 이 타원형 영역을 설명하는 데 사용됩니다(회전 속성은 IE10+에서 사용됨). #force 속성: 터치 압력을 나타내는 0에서 1 사이의 값을 반환합니다. 0은 압력이 없음을 나타내고, 1은 하드웨어에서 인식되는 최대 압력을 나타냅니다(압력 속성은 IE10+에서 사용되며 값은 0 - 255입니다). 요소 노드는 터치가 발생한 노드를 나타냅니다. 이 터치 포인트가 처음 추적되면(touchstart 이벤트에서) 터치 포인트가 위치한 HTML 요소가 터치 포인트 이동 중에도 터치 포인트의 위치가 유효 상호 작용 영역을 벗어났습니다. ​요소 또는 요소가 문서에서 제거되었습니다. 터치 프로세스 중에 이 요소가 제거되면 이 이벤트는 여전히 해당 요소를 가리키지만 이 이벤트는 더 이상 창이나 문서에 표시되지 않습니다. 따라서 요소가 터치되면 프로세스 중에 제거될 수 있습니다. 가장 좋은 방법은 요소가 제거된 후 상위 요소에서 더 이상 감지되지 않도록 요소 자체에 터치 이벤트 리스너를 바인딩하는 것입니다. . 읽기 전용 속성입니다.

• altKey/ctrlKey/metaKey/shiftKey는 모두 읽기 전용 속성입니다. Key를 터치하는 동안 특정 키가 눌렸는지 여부를 나타내는 부울 값을 반환합니다.

• changedTouches 속성: 현재 터치 이벤트로 인해 발생한 모든 터치 개체(예: 관련 터치 포인트)가 포함된 TouchList 개체를 반환합니다. 여기에는 마지막 터치 이벤트부터 이 이벤트까지 상태가 변경된 모든 터치 포인트를 나타내는 터치 개체가 포함되어 있습니다. 읽기 전용 속성입니다.

• targetTouches 속성: 대상 Element 노드 내에서 여전히 활성화된 모든 터치 포인트가 포함된 TouchList 객체를 반환합니다.

• touches 속성은 요소의 시작 위치에 관계없이 현재 터치 평면에 닿는 모든 Touch 개체를 포함하는 TouchList 개체(배열과 같은 개체)를 반환합니다. 그들의 상태가 변경되었습니다. 읽기 전용 속성

• type 속성: 이 터치 이벤트의 유형을 나타냅니다.

• target 속성: 이 터치 이벤트의 대상 요소입니다. 이 대상 요소는 TouchEvent.changedTouches(나중에 이벤트 유형에서 설명)에 있는 터치 포인트의 시작 요소에 해당하지만 참고: 이 이벤트에서 다른 터치 포인트의 시작 요소는 다를 수 있습니다. 만일을 대비해 각 개별 터치포인트와 관련된 목표를 사용하세요.

• 다음은 IE10+의 다른 속성입니다:

• hwTimestamp: 이벤트 시간 생성(밀리초);# 🎜🎜#

• isPrimary: 시간이 메인 이벤트인지 여부를 나타냅니다.

• pointerType: 이벤트에서 값을 가져옵니다. MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE, 터치 장치를 나타냅니다.

tilt[X|Y]: 펜의 기울기 정도;

举一个简单例子：

function handleMove(evt) {
  evt.preventDefault(); // 阻止浏览器继续处理触摸事件，也阻止发出鼠标事件
  var touches = evt.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    var id = touches[i].identifier;
    var touch = touches.identifiedTouch(id);
    console.log(touch.pageX, touch.pageY);
  }
}

对于跨平台交互，我封装了一个 tap相关事件如下：

//以下代码并未兼容低版本 IE
function addTapListener(node, callback){
  var startEvent = window.onmousedown ? window.onmspointerdown ? 'mspointerdow' : 'mousedown' : 'touchstart';
  var event = window.onclick ? 'click' : 'touch';
  var endEvent = window.onmouseup ? 'mouseup' : 'touchend';

  node.addEventListener(startEvent, function(e){
    var tap = document.createEvent('CustomEvent');
    tap.initCustomEvent('tapstart', true, true, null);
    node.dispatchEvent(tap);
  });
  node.addEventListener(event, function(e){
    var tap = document.createEvent('CustomEvent');
    tap.initCustomEvent('tap', true, true, null);
    node.dispatchEvent(tap);
  });
  node.addEventListener(endEvent, function(e){
    var tap = document.createEvent('CustomEvent');
    tap.initCustomEvent('tapend', true, true, null);
    node.dispatchEvent(tap);
  });

  node.addEventListener('tap', callback);
}

当然本文仅仅列举了一些常用事件，其实事件还有很多，本文会在必要的时候继续更新，但即便如此也不可能穷尽所有的事件，比如还有动画事件: animationstart, animation, animationend 等等。

相关推荐：

解析javascript 浏览器关闭事件_javascript技巧

JavaScript中的跨浏览器事件（图文教程）

위 내용은 브라우저에서 일반적으로 사용되는 5가지 이벤트 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：

html html5 javascript

원천：php.cn

이전 기사：버튼과 입력방식의 차이점 및 주의사항=버튼 다음 기사：HTML(코드 포함)에서 레이블의 역할과 사용에 대한 심층적인 이해

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• 프로그래밍이란 무엇입니까?
  2019-04-16 16:04:28
• 검색 단축키는 ctrl 키 + 어떤 키인가요?
  2020-09-15 11:26:00
• 잘라내기 단축키 Ctrl에 무엇이 추가되나요?
  2020-09-10 14:26:14
• 그 직업은 무엇인가요?
  2020-09-08 11:06:15
• Ctrl +를 누르면 무엇을 저장하나요?
  2020-09-09 09:46:36
• ctrl+t 단축키는 무엇인가요?
  2020-10-12 14:51:04
• PS 눈금자를 사용하는 방법은 무엇입니까?
  2020-09-10 14:40:02
• 프로그래밍을 배우기에 적합한 사람은 누구입니까?
  2019-04-24 16:20:55
• PS에서 역선택 단축키는 무엇인가요?
  2020-10-13 11:40:03
• 두 인라인 요소 사이에 줄 바꿈을 추가하는 방법
  2019-04-15 14:06:21

최신 이슈

내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...

에서 2024-04-06 15:33:12

0

1

433

PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...

에서 2024-04-05 12:57:00

0

1

456

HTML5에서 enctype과 formenctype의 차이점은 무엇입니까? HTMLLivingStandard(새 HTML5 사양이라고도 함)의 enctype 속성과 formenctype 속성의 차이점이 무엇인지 궁금합니다. 나는 개발자를...

에서 2024-04-02 11:47:56

0

1

275

페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...

에서 2024-04-01 20:42:38

0

1

259

관련 주제

더>

• HTML 저작권 기호
• js에서 배열의 길이를 얻는 방법
• HTML 온라인 편집기
• js 현재 페이지 새로 고침
• JS 반올림
• html 웹페이지 제작
• HTML 공간
• HTML이 무엇인가요?

인기 추천

• url은 무슨 뜻인가요?
• DOM은 무엇을 의미하나요?
• 이미지 크기를 변경하는 방법
• HTML에서 글꼴을 굵게 만드는 방법
• HTML 이미지의 크기를 설정하는 방법

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  JS 추상 클래스 및 이벤트 디자인 패턴 비디오 튜토리얼

  45665

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1420860 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2513165 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  505938 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  215592 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  885581 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  7140 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  5545 학습 시간
• 
  Go 언어 실습 GraphQL

  4670 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  669 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  23606 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved