Quels événements prennent en charge le bouillonnement d'événements

Les événements qui prennent en charge le bouillonnement d'événements incluent les événements de souris, les événements de clavier, les événements de formulaire, les événements de fenêtre, les événements tactiles, etc. Introduction détaillée : 1. Événements de souris, clic, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, etc. ; 2. Événements de clavier, keydown, keyup, keypress, etc. ; 3. Événements de formulaire, soumission, modification, focus, flou, etc. 4 , événements de fenêtre, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Le bouillonnement d'événements est une méthode de propagation d'événements courante en JavaScript. Lorsqu'un événement se déclenche sur un élément, l'événement se déclenche non seulement sur cet élément, mais bouillonne également, déclenchant le gestionnaire d'événements de son élément parent. Ce mécanisme de bouillonnement nous permet d'utiliser moins de code pour gérer le même événement, en particulier lorsqu'il s'agit de structures DOM complexes.

La plupart des événements du navigateur prennent en charge le bouillonnement d'événements, notamment :

1. Événements de souris : clic, double-clic, mousedown, mouseup, mouseover, mouseout, etc. ;

2. Événements de clavier : keydown, keyup, keypress, etc.

Événements de formulaire : soumettre, modifier, mettre au point, flou, etc. ;

4. Événements de fenêtre : charger, décharger, redimensionner, etc. ; , etc. (remarque : tous les navigateurs ne prennent pas en charge tous les événements tactiles).

Voici quelques exemples spécifiques :

// 鼠标事件冒泡  
document.getElementById("outer").addEventListener("click", function() {  
  console.log("outer clicked");  
});  
  
document.getElementById("inner").addEventListener("click", function() {  
  console.log("inner clicked");  
});  
  
// 键盘事件冒泡  
document.getElementById("outer").addEventListener("keydown", function() {  
  console.log("outer keydown");  
});  
  
document.getElementById("inner").addEventListener("keydown", function() {  
  console.log("inner keydown");  
});  
  
// 表单事件冒泡  
document.getElementById("outer").addEventListener("submit", function() {  
  console.log("outer submit");  
});  
  
document.getElementById("inner").addEventListener("submit", function() {  
  console.log("inner submit");  
});

Dans l'exemple ci-dessus, lorsqu'un clic ou une pression sur une touche se produit sur l'élément "intérieur", les gestionnaires d'événements de l'élément "intérieur" et de l'élément "extérieur" seront déclenchés. C’est l’effet du bouillonnement d’événements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!