Explication détaillée des événements de l'interface utilisateur dans les types d'événements JavaScript_compétences Javascript

Les « événements DOM niveau 3 » précisent plusieurs types d'événements

Événements d'interface utilisateur, divisés lorsque l'utilisateur interagit avec des éléments de la page
Événement de concentration, l'élément gagne ou perd la concentration
Événements de souris, effectuez des opérations sur la page via la souris
Événement de molette de défilement, en utilisant la molette de la souris ou un appareil similaire
Événement de texte, lorsque l'utilisateur saisit du texte dans le document
Événements de clavier, effectuez des opérations sur la page via le clavier
Événement synthétique, division lors de la saisie des caractères pour IME (Input Method Editor
) ; Événement de changement (mutation), la structure DOM sous-jacente change
Événement de changement de nom : lorsque le nom de l'élément ou de l'attribut change, ce type d'événement est obsolète.
Ce qui suit se concentre sur le contenu des événements de l'interface utilisateur

Les événements d'interface utilisateur font référence à des événements qui ne sont pas nécessairement liés aux opérations de l'utilisateur.

DOMActivate，元素已经被用户操作（鼠标或键盘）激活。已经被废弃。
load，页面完全加载完后在window上触发，所有框架加载完毕后在框架集上触发，图像加载完毕在img元素上触发，当嵌入内容加载完毕在object元素上触发。
unload，页面完全卸载（window），所有框架都卸载后（框架集），嵌入内容卸载完毕后（object）。
abort，当用户停止下载过程，如果嵌入内容没有加载完，则在object元素上除法。
error，当js错误时（window），当无法加载图像时（img），当无法加载嵌入内容时（object），当一或多个框架无法加载（框架集）。
select，当用户选择文本框（texterea或input）中的一个或多个字符时触发。
resize：当窗口或框架的大小变化时（window或框架）
scroll：当用户滚动带滚动条的元素中的内容时（在该元素上触发）

charger l'événement

L'un des événements les plus couramment utilisés en js est le chargement. Lorsque la page est complètement chargée (toutes les images, les fichiers js, les fichiers css, etc.), l'événement de chargement sur la fenêtre sera déclenché. Tel que :

window.onload = function () {
  console.log('loaded');
}

De manière générale, tous les événements qui se produisent sur la fenêtre peuvent être spécifiés via les caractéristiques correspondantes dans l'élément body, car l'élément window n'est pas accessible en HTML. Il ne s’agit que d’une mesure provisoire pour garantir la compatibilité ascendante. Tel que :

document.body.onload = function () {
  console.log('loaded');
}

Peut également être utilisé sur des éléments d'image :

var img = document.getElementById("img");
img.onload = function () {
  console.log(event.target.src);
}

Un autre exemple est le code suivant. Une fois la fenêtre chargée, un élément img est ajouté au corps. Une fois l'élément img chargé, le src de l'image et un message d'invite sont demandés :

window.onload = function () {
  var image = document.createElement("img");
  document.body.appendChild(image);
  image.src = "scr.png"
  image.onload = function () {
    console.log(event.target.src);
    console.log('img is loaded');
  };
}

De plus, l'élément script prend également en charge l'événement load de manière non standard.

Certains navigateurs prennent également en charge l'événement load sur l'élément link afin que les développeurs puissent déterminer si la feuille de style a été chargée.

événement de déchargement

Cet événement est déclenché après le déchargement complet du document. L'événement de déchargement se produit chaque fois que l'utilisateur passe d'une page à une autre.

window.onunload = function () {
  alert("8888");
}

Des précautions doivent être prises lors de l'écriture de code dans le gestionnaire d'événements onunload, car les objets qui existent après le chargement de la page peuvent ne pas exister à ce moment-là.

événement de redimensionnement

Cet événement est déclenché lorsque la fenêtre du navigateur est redimensionnée à une nouvelle hauteur ou largeur.

window.onresize = function () {
  console.log(document.body.clientWidth);
}

Parce que certains navigateurs déclenchent cet événement lorsque la fenêtre change de 1 pixel, et continuent de se déclencher lorsque la fenêtre change ; d'autres navigateurs ne se déclencheront que lorsque l'utilisateur arrête de redimensionner la fenêtre. Par conséquent, vous devez éviter d'ajouter beaucoup de code de calcul au gestionnaire de cet événement pour éviter que le navigateur ne ralentisse sa réponse.

événement de défilement

Bien que cet événement se produise sur l'objet window, il représente en réalité des changements dans les éléments de réponse sur la page. En mode mixte, les modifications sont surveillées via les éléments scrollLeft et scrollTop de l'élément body ; en mode non standard, tous les navigateurs à l'exception de Safari refléteront cette modification via l'élément html (documentElement) :

window.onscroll = function () {
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

Étant donné que le navigateur est constamment déclenché par des modifications, vous devez éviter d'ajouter beaucoup de code de calcul au gestionnaire de cet événement pour éviter de ralentir la réponse du navigateur.

Annuler l'événement

Veuillez prêter attention aux mises à jour ultérieures concernant l'abandon, l'erreur, la sélection et d'autres événements

événement d'erreur

Veuillez prêter attention aux mises à jour ultérieures concernant l'abandon, l'erreur, la sélection et d'autres événements

sélectionner un événement

Veuillez prêter attention aux mises à jour ultérieures concernant l'abandon, l'erreur, la sélection et d'autres événements