Analyse von 5 häufig verwendeten Ereignissen in Browsern

Der Inhalt dieses Artikels befasst sich mit der häufig verwendeten Ereignisanalyse in Browsern. Freunde in Not können darauf verweisen.

Formularereignis

Tastaturereignis

Wird ausgelöst, wenn sich der Wert von <input>, <textarea> ändert. Darüber hinaus wird das Eingabeereignis immer dann ausgelöst, wenn der Wert des Elements mit dem Attribut contenteditable aktiviert wird. Ein Merkmal des Eingabeereignisses ist, dass es kontinuierlich ausgelöst wird. Beispielsweise wird jedes Mal, wenn der Benutzer eine Taste drückt, ein Eingabeereignis ausgelöst.

Zu diesen Ereignissen gehören: Tastendruck, Tastendruck,

Mausereignis

Auswahlereignis wird ausgelöst, wenn Text in <input>, <textarea> ausgewählt wird;

Änderungsereignis wird ausgelöst, wenn sich der Wert von <input>, , <textarea> ändert. Der größte Unterschied zum Eingabeereignis besteht darin, dass es nicht kontinuierlich ausgelöst wird. Es wird erst ausgelöst, wenn alle Änderungen abgeschlossen sind, und das Eingabeereignis löst zwangsläufig ein Änderungsereignis aus. Im Einzelnen wird es in folgende Situationen unterteilt:

• Wird ausgelöst, wenn das Optionsfeld oder die Checkbox aktiviert ist.

• Wird ausgelöst, wenn der Benutzer etwas sendet. Vervollständigen Sie beispielsweise die Auswahl aus der folgenden Liste (select), vervollständigen Sie die Auswahl im Datums- oder Dateieingabefeld.

• Wird ausgelöst, wenn sich der Wert des Textfelds oder Textbereichselements ändert und der Fokus verloren geht.

• Das Reset-Ereignis wird durch das Formularelement ausgelöst, wenn das Formular zurückgesetzt wird (alle Formularmitglieder werden auf ihre Standardwerte zurückgesetzt).

• Das Submit-Ereignis wird durch das Formularelement ausgelöst, wenn Formulardaten an den Server übermittelt werden.

Dokumentereignis:

beforeunload

Das beforeunload-Ereignis wird ausgelöst, wenn das Fenster kurz vor dem Schließen steht oder wenn das Dokument und die Webressourcen geschlossen werden kurz vor der Entladung. Es kann verwendet werden, um zu verhindern, dass Benutzer versehentlich eine Webseite schließen. Die Standardaktion dieses Ereignisses besteht darin, das aktuelle Fenster oder Dokument zu schließen. Wenn event.preventDefault() in der Listening-Funktion aufgerufen wird oder dem returnValue-Attribut des Ereignisobjekts ein Wert ungleich Null zugewiesen wird, wird automatisch ein Bestätigungsfeld angezeigt, in dem der Benutzer aufgefordert wird, zu bestätigen, ob die Webseite geschlossen werden soll. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, wird die Webseite nicht geschlossen. Die von der Überwachungsfunktion zurückgegebene Zeichenfolge wird im Bestätigungsdialogfeld angezeigt:

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

unload und Load

Entladeereignisse werden ausgelöst, wenn das Fenster geschlossen wird oder das Dokumentobjekt entladen werden soll . Es kommt im Fenster, über dem Körper, im Frameset und in anderen Objekten vor. Die Auslösereihenfolge liegt hinter den Ereignissen beforeunload und pagehide. Das Entladeereignis wird nur ausgelöst, wenn die Seite nicht vom Browser zwischengespeichert wurde. Mit anderen Worten: Wenn die Seite durch Drücken von „Vorwärts/Zurück“ entladen wird, wird das Entladeereignis nicht ausgelöst. Wenn das Entladeereignis auftritt, befindet sich das Dokumentobjekt in einem besonderen Zustand. Alle Ressourcen sind noch vorhanden, aber für den Benutzer nicht sichtbar, und alle UI-Interaktionen (window.open, Warnung, Bestätigungsmethoden usw.) sind alle ungültig. Selbst wenn zu diesem Zeitpunkt ein Fehler ausgegeben wird, kann das Entladen des Dokuments nicht gestoppt werden.

Das Ladeereignis wird ausgelöst, wenn die Seite erfolgreich geladen wird, und das Fehlerereignis wird ausgelöst, wenn das Laden der Seite fehlschlägt. Beachten Sie, dass die Seite aus dem Browser-Cache geladen wird und das Ladeereignis nicht auslöst.

Diese beiden Ereignisse sind eigentlich Fortschrittsereignisse, die nicht nur im Dokumentobjekt, sondern auch in verschiedenen externen Ressourcen auftreten. Beim Surfen im Internet werden verschiedene Ressourcen geladen, beispielsweise Bilder, Stylesheets, Skripte, Videos, Audios, Ajax-Anfragen (XMLHttpRequest) usw. Diese Ressourcen, Dokumentobjekte, Fensterobjekte und XMLHttpRequestUpload-Objekte lösen Ladeereignisse und Fehlerereignisse aus.

pageshow und pagehide

pageshow-Ereignis, pagehide-Ereignis: Standardmäßig speichert der Browser die Seite in der aktuellen Sitzung (Sitzung), wenn der Benutzer auf die Schaltfläche „Vorwärts/Zurück“ klickt. Der Browser Die Seite wird aus dem Cache geladen.
Das Pageshow-Ereignis wird ausgelöst, wenn die Seite geladen wird, einschließlich des ersten Ladevorgangs und des Ladens aus dem Cache. Wenn Sie Code angeben möchten, der jedes Mal ausgeführt wird, wenn die Seite geladen wird (unabhängig davon, ob er vom Browser zwischengespeichert wird oder nicht), können Sie ihn in die Überwachungsfunktion dieses Ereignisses einfügen. Beim ersten Laden liegt seine Zündreihenfolge hinter dem Ladeereignis. Beim Laden aus dem Cache wird das Ladeereignis nicht ausgelöst, da die Seite im Cache normalerweise so aussieht, wie sie aussieht, nachdem die Überwachungsfunktion des Ladeereignisses ausgeführt wurde, sodass keine Notwendigkeit besteht, sie zu wiederholen. Wenn die Seite aus dem Cache geladen wird, wird auf die gleiche Weise das auf der Webseite initialisierte JavaScript-Skript (z. B. die Überwachungsfunktion des DOMContentLoaded-Ereignisses) nicht ausgeführt. Das Pageshow-Ereignis verfügt über ein persistiertes Attribut, das einen booleschen Wert zurückgibt. Wenn die Seite zum ersten Mal geladen wird, ist dieses Attribut falsch; wenn die Seite aus dem Cache geladen wird, ist dieses Attribut wahr.

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

In ähnlicher Weise bedeutet das Setzen dieses Attributs, dass die Seite im Cache gespeichert wird. Wenn Sie es auf false setzen, wird die Seite zu diesem Zeitpunkt nicht im Cache gespeichert Wenn das Entladeereignis festgelegt ist, wird die Funktion unmittelbar nach dem Pagehide-Ereignis ausgeführt. Wenn die Seite einen Frame enthält, werden das Pageshow-Ereignis und das Pagehide-Ereignis der Frame-Seite vor der Hauptseite ausgelöst.

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: Wird ausgelöst, wenn der Benutzer den Berührungspunkt bewegt. Sein Zielattribut stimmt mit dem Zielattribut des Touchstart-Ereignisses überein. Dieses Ereignis wird auch ausgelöst, wenn sich Radius, Winkel und Intensität der Berührung ändern. (Das mspointermove-Ereignis wird in IE10+ verwendet);

4. touchenter: Wird ausgelöst, wenn der Berührungspunkt ein Element betritt. Für dieses Ereignis gibt es keinen Sprudelprozess. (Das mspointerover-Ereignis wird in IE10+ verwendet);

5. touchleave: Wird ausgelöst, wenn der Berührungspunkt ein Element verlässt. Für dieses Ereignis gibt es keinen Sprudelprozess. (Das mspointerout-Ereignis wird in IE10+ verwendet);

6. touchcancel: Wird ausgelöst, wenn der Kontakt aus irgendeinem Grund unterbrochen wird. Es gibt mehrere mögliche Gründe wie folgt (die spezifischen Gründe variieren je nach Gerät und Browser): (Es gibt kein entsprechendes Ereignis in IE10+);

1. Die Berührung wurde aufgrund eines Ereignisses abgebrochen: Beispielsweise wurde der Berührungsvorgang durch ein modales Popup-Fenster oder einen Telefonanruf unterbrochen.

2. Der Berührungspunkt verließ das Dokumentfenster und trat ein die Schnittstellenelemente, Plug-ins oder andere externe Inhaltsbereiche des Browsers;

3. Wenn die Anzahl der vom Benutzer generierten Berührungspunkte die vom Gerät unterstützte Anzahl überschreitet, wird das früheste Touch-Objekt im TouchList wird abgebrochen.

Die Touch-API besteht aus drei Objekten. Jedes Touch-Objekt stellt einen Berührungspunkt dar; jeder Berührungspunkt wird durch seine Position, Größe, Form, Druckstufe und Zielelement beschrieben. Ein TouchList-Objekt stellt eine Liste mehrerer Berührungspunkte dar. Insbesondere umfasst es die folgenden Attribute:

• Bezeichnerattribut: Stellt den eindeutigen Bezeichner der Touch-Instanz dar. Es bleibt während des gesamten Berührungsprozesses unverändert (pointerId-Attribut wird in IE10+ verwendet);

• screenX/screenY-Attribute: repräsentieren jeweils die Abszisse und die Ordinate des Berührungspunkts relativ zur oberen linken Ecke von auf dem Bildschirm, Es hat nichts damit zu tun, ob die Seite gescrollt wird;

• ClientX/ClientY-Attribute: repräsentieren jeweils die Abszisse und Ordinate des Berührungspunkts relativ zur oberen linken Ecke des Browser-Ansichtsfenster, unabhängig davon, ob die Seite gescrollt wird;

• pageX/pageY-Attribute: repräsentieren jeweils die Abszisse und Ordinate des Berührungspunkts relativ zur oberen linken Ecke der aktuellen Seite, einschließlich die durch das Scrollen der Seite verursachte Verschiebung;

• radiusX/radiusY-Attribute: Gibt die X-Achse bzw. Y-Achse des betroffenen Ellipsenbereichs um den Berührungspunkt in Pixel zurück;

• rotationAngle-Attribut: Stellt die Ellipse des Berührungsbereichs dar. Drehwinkel in Grad zwischen 0 und 90 Grad. Wenn die Fingerspitze den Bildschirm berührt, bildet der Berührungsbereich eine Ellipse (das Rotationsattribut wird in IE10+ verwendet); Gibt einen Wert zwischen 0 und 1 zurück. Ein Wert zwischen 1 steht für Berührungsdruck. 0 stellt keinen Druck dar, 1 stellt den maximalen Druck dar, den die Hardware erkennen kann (das Druckattribut wird in IE10+ verwendet, der Wert ist 0 - 255);

• Zielattribut: Gibt ein Element zurück Knoten, der die Berührung darstellt. Der Knoten, an dem es passiert ist. Wenn dieser Berührungspunkt zum ersten Mal verfolgt wird (im Touchstart-Ereignis), wird das HTML-Element angezeigt, in dem sich der Berührungspunkt befindet. Auch wenn die Position des Berührungspunkts während der Bewegung des Berührungspunkts den effektiven Interaktionsbereich von​ verlassen hat ​das Element oder das Element wurde aus dem Dokument entfernt. Es ist zu beachten, dass dieses Ereignis immer noch darauf verweist, wenn dieses Element während des Touch-Vorgangs entfernt wird, dieses Ereignis jedoch nicht mehr in das Fenster oder Dokument gelangt Wenn ein Element berührt wird, kann es daher während des Vorgangs entfernt werden. Die beste Vorgehensweise besteht darin, den Touch-Ereignis-Listener an das Element selbst zu binden, um zu verhindern, dass das Element nach dem Entfernen nicht mehr erkennbar ist . Schreibgeschütztes Attribut.

• altKey/ctrlKey/metaKey/shiftKey sind alle schreibgeschützte Attribute: Geben Sie einen booleschen Wert zurück, der angibt, ob beim Berühren eine Taste gedrückt wird

• changedTouches-Eigenschaft: Gibt ein TouchList-Objekt zurück, das alle durch das aktuelle Touch-Ereignis verursachten Touch-Objekte (d. h. zugehörige Touch-Punkte) enthält. Es enthält Touch-Objekte, die alle Berührungspunkte darstellen, deren Zustand sich seit dem letzten Berührungsereignis zu diesem Ereignis geändert hat. Schreibgeschützte Eigenschaft.

• targetTouches-Eigenschaft: Gibt ein TouchList-Objekt zurück, das alle Berührungspunkte enthält, die innerhalb des Zielelementknotens noch aktiv sind.

• Die touches-Eigenschaft gibt ein TouchList-Objekt (array-ähnliches Objekt) zurück, das alle Touch-Objekte enthält, die derzeit die Touch-Ebene berühren, unabhängig davon, von welchem ​​Element sie ausgehen oder ob sie vorhanden sind Der Status hat sich geändert. Schreibgeschützte Attribute

• Typattribut: bezieht sich auf den Typ dieses Berührungsereignisses.

• Zielattribut: das Zielelement dieses Berührungsereignisses. Dieses Zielelement entspricht dem Startelement des Berührungspunkts in TouchEvent.changedTouches (wird später im Ereignistyp beschrieben), aber bitte beachten Sie: Die Startelemente anderer Berührungspunkte in diesem Ereignis können unterschiedlich sein. Verwenden Sie für alle Fälle Ziele, die mit jedem einzelnen Berührungspunkt verknüpft sind.

• Das Folgende sind weitere Eigenschaften in IE10+:

hwTimestamp: Erstellungsereigniszeit (Millisekunden);

• isPrimary: Gibt an, ob die Zeit das Hauptereignis ist;

• pointerType: Der Wert stammt von event.MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE und gibt das Touch-Gerät an;

• tilt[X|Y]: der Neigungsgrad des Stifts;

举一个简单例子：

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中的跨浏览器事件（图文教程）

Das obige ist der detaillierte Inhalt vonAnalyse von 5 häufig verwendeten Ereignissen in Browsern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

html html5 javascript

Quelle：php.cn

Vorheriger Artikel：Der Unterschied und die Vorsichtsmaßnahmen zwischen Schaltfläche und Eingabetyp = Schaltfläche Nächster Artikel：Vertieftes Verständnis der Rolle und Verwendung von Labels in HTML (Code im Anhang)

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Was ist Programmierung?
  2019-04-16 16:04:28
• Die Tastenkombination für die Suche ist die Strg-Taste plus What-Taste
  2020-09-15 11:26:00
• Was wird der Ausschneiden-Tastenkombination Strg hinzugefügt?
  2020-09-10 14:26:14
• Was ist der Beruf?
  2020-09-08 11:06:15
• Was speichert Strg+?
  2020-09-09 09:46:36
• Was ist die Tastenkombination für Strg+T?
  2020-10-12 14:51:04
• Wie verwende ich das PS-Lineal?
  2020-09-10 14:40:02
• Wer eignet sich zum Erlernen des Programmierens?
  2019-04-24 16:20:55
• Was ist die Tastenkombination für die umgekehrte Auswahl in PS?
  2020-10-13 11:40:03
• So fügen Sie einen Zeilenumbruch zwischen zwei Inline-Elementen hinzu
  2019-04-15 14:06:21

Aktuelle Ausgaben

Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...

Aus 2024-04-06 15:33:12

0

1

433

Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...

Aus 2024-04-05 12:57:00

0

1

456

Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...

Aus 2024-04-02 11:47:56

0

1

275

Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...

Aus 2024-04-01 20:42:38

0

1

259

verwandte Themen

Mehr>

• HTML-Copyright-Symbol
• So erhalten Sie die Länge eines Arrays in js
• HTML-Online-Editor
• js aktuelle Seite aktualisieren
• js Rundung
• HTML-Webseitenproduktion
• HTML-Speicherplatz
• Was ist HTML?

Beliebte Empfehlungen

• Was bedeutet URL?
• Was bedeutet DOM?
• So ändern Sie die Bildgröße
• So machen Sie die Schriftart in HTML fett
• So legen Sie die Größe von HTML-Bildern fest

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  JS抽象类和事件设计模式视频教程

  45156

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1417006 Lernzeiten
• 
  JAVA 初级入门视频教程

  2476386 Lernzeiten
• 
  小甲鱼零基础入门学习Python视频教程

  503726 Lernzeiten
• 
  Web前端开发极速入门

  215287 Lernzeiten
• 
  零基础精通 PS 视频教程

  877143 Lernzeiten

• 
  【web前端】Node.js快速入门

  6415 Lernzeiten
• 
  国外Web开发全栈课程全集

  5047 Lernzeiten
• 
  Go语言实战之 GraphQL

  4241 Lernzeiten
• 
  550W粉丝大佬手把手从零学JavaScript

  633 Lernzeiten
• 
  python大神Mosh，零基础小白6小时完全入门

  21482 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [Formular-Schaltfläche] Kontaktcode für das jQuery-Enterprise-Nachrichtenformular
• [Spezialeffekte für Spieler] Wiedergabeeffekte für HTML5-MP3-Spieluhren
• [Menünavigation] HTML5 coole Partikelanimations-Navigationsmenü-Spezialeffekte
• [Formular-Schaltfläche] Drag-and-Drop-Bearbeitungscode für visuelle jQuery-Formulare
• [Spezialeffekte für Spieler] VUE.JS imitiert den Kugou-Musik-Player-Code
• [HTML5-Spezialeffekte] Klassisches HTML5-Pushing-Box-Spiel
• [Bildspezialeffekte] jQuery-Scrollen zum Hinzufügen oder Reduzieren von Bildeffekten
• [Fotoalbumeffekte] Persönlicher CSS3-Albumcover-Hover-Zoom-Effekt

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Über uns Haftungsausschluss Sitemap

Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！