terminologie

de quirksmode.org :

capture D'événement

lorsque vous utilisez la capture d'événements

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

le gestionnaire d'événement de element1 tire en premier, le gestionnaire d'événement de element2 feux dernier.

even bubbling

quand vous utilisez événement barbotage

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

le gestionnaire d'événement de element2 tire en premier, le gestionnaire d'événement de element1 feux dernier.

tout événement qui a lieu dans le modèle d'événement W3C est d'abord capturé jusqu'à ce qu'il atteigne l'élément cible et puis bulles vers le haut de nouveau .

                 | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

Interface

de w3.org , pour event capture :

si la capture EventListener souhaite empêcher la poursuite de la l'événement de se produire, il peut appeler la méthode stopPropagation de la Event de l'interface. Cela empêchera la diffusion ultérieure de l'événement, bien que supplémentaire EventListeners enregistré à la même hiérarchie niveau recevra toujours l'événement. Une fois un événement stopPropagation méthode a été appelé, d'autres appels à cette méthode n'ont pas effet supplémentaire. Si aucune autre capturers existent et stopPropagation n'a pas été appelé, l'événement déclenche le approprié EventListeners sur la cible elle-même.

Pour "1519520920 de l'événement" bouillonnement :

tout handler d'événement peut choisir d'empêcher la propagation de l'événement par appelant la méthode stopPropagation de l'interface Event . Si tout EventListener appelle cette méthode, tous les supplémentaires EventListeners sur le EventTarget sera déclenché bouillonnante mais cessera dès que niveau. Un seul appel à stopPropagation est nécessaire pour empêcher d'autres bouillonnement.

pour annulation d'événement :

annulation est effectuée en appelant le Event 's preventDefault méthode. Si un ou plusieurs EventListeners appeler preventDefault pendant toute phase du flux d'événement l'action par défaut sera annulée.

Exemples

dans les exemples suivants, un clic sur l'hyperlien dans le navigateur Web déclenche le flux de l'événement (les écouteurs de l'événement sont exécutés) et l'action par défaut de la cible de l'événement (un nouvel onglet est ouvert).

HTML:

<div id="a">
  <a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>

JavaScript:

var el = document.getElementById("c");

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
}

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
}

function bubblingOnClick1(ev) {
    el.innerHTML += "DIV event bubbling<br>";
}

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
}

// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);

exemple 1 : il résulte de la sortie

DIV event capture
A event capture
A event bubbling
DIV event bubbling

exemple 2 : ajout de stopPropagation() à la fonction

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.stopPropagation();
}

résultats dans la sortie

DIV event capture

l'auditeur de l'événement a empêché la propagation vers le bas et vers le haut de l'événement. Cependant, il n'a pas empêché l'action par défaut (une nouvelle ouverture de l'onglet).

exemple 3 : ajout de stopPropagation() à la fonction

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
    ev.stopPropagation();
}

ou la fonction

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
    ev.stopPropagation();
}

résultats dans la sortie

DIV event capture
A event capture
A event bubbling

c'est parce que les deux écouteurs d'événements sont enregistrés sur la même cible d'événement. Les auditeurs de l'événement ont empêché la propagation vers le haut de l'événement. Cependant, ils n'ont pas empêché l'action par défaut (une nouvelle ouverture d'onglet).

exemple 4 : ajout de preventDefault() à toute fonction, par exemple

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.preventDefault();
}

empêche un nouvel onglet de s'ouvrir.

return false;

---

return false; ne 3 la part des choses, quand vous l'appelez:

1. event.preventDefault() – il arrête le comportement par défaut des navigateurs.
2. event.stopPropagation() – il empêche l'événement de propager (ou "bouillonner") le DOM.
3. arrête l'exécution de callback et retourne immédiatement lorsqu'il est appelé.

noter que ce comportement diffère des gestionnaires d'événements normaux (non-jQuery), dans lesquels, notamment, return false n'empêche pas l'événement de bouillonner.

preventDefault ();

---

preventDefault(); fait une chose: il arrête le comportement par défaut des navigateurs.

Quand les utiliser?

---

Nous savons ce qu'ils font, mais quand les utiliser? Simplement, il dépend de ce que vous voulez accomplir. Utilisez preventDefault(); si vous voulez" juste " empêcher le comportement par défaut du navigateur. Utilisez return false; lorsque vous voulez empêcher le comportement par défaut du navigateur et empêcher l'événement de propager le DOM. Dans la plupart des situations où vous utiliseriez return false; ce que vous voulez vraiment est preventDefault() .

exemples:

---

essayons de comprendre avec des exemples:

nous verrons exemple pur JAVASCRIPT

exemple 1:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

exécutez le code ci-dessus vous verrez l'hyperlien ' Cliquez ici pour visiter stackoverflow.com‘ maintenant, si vous cliquez sur ce lien, vous obtiendrez le lien javascript alerte a cliqué Ensuite, vous obtiendrez le javascript alerte div cliqué et immédiatement vous serez redirigé vers stackoverflow.com.

exemple 2:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

exécutez le code ci-dessus vous verrez l'hyperlien " cliquez ici pour visiter stackoverflow.com " maintenant, si vous cliquez sur ce lien, vous obtiendrez l'alerte javascript lien cliqué Suivant vous obtiendrez le javascript alerte div cliqué Suivant vous verrez l'hyperlien " cliquez ici pour visite stackoverflow.com "remplacé par le texte" Click event prevented‘ et vous ne sera pas être redirigé vers stackoverflow.com. Ceci est dû à l'événement.la méthode preventDefault() que nous avons utilisée pour empêcher le clic par défaut l'action d'être déclenchée.

exemple 3:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

cette fois si vous cliquez sur le lien la fonction executeParent () ne sera pas soyez appelé et vous ne recevrez pas l'alerte javascript div cliqué cette fois. Cela est dû au fait que nous avons empêché la propagation à la parent div utilisant event.méthode de stopPropagation (). Ensuite, vous verrez les hyperlink 'Cliquez ici pour visiter stackoverflow.com" remplacé par le texte suivant 'Click event va être exécuté‘ et immédiatement vous serez redirigé vers stackoverflow.com. C'est parce que nous n'avons pas empêché l'action de clic par défaut du déclenchement de cette fois en utilisant événement.méthode preventDefault ().

exemple 4:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

si vous cliquez sur le lien, la fonction executeParent () ne sera pas appelé et vous ne pas obtenir l'alerte javascript. C'est à cause de nous ayant empêché la propagation vers le div parent en utilisant événement.méthode de stopPropagation (). Ensuite, vous verrez l'hyperlien ‘cliquez ici pour visiter stackoverflow.com "remplacé par le texte" Click event vous ne serez pas redirigé vers stackoverflow.com. Ce est parce que nous avons empêché l'action de clic par défaut de déclencher cette fois, en utilisant de l'événement.méthode preventDefault ().

Exemple 5:

Pour le retour de faux j'ai trois exemples, et tous semblent être en train de faire exactement la même chose (juste retourner false), mais en réalité, l' les résultats sont tout à fait différents. Voici ce qui se passe dans chacun de le ci-dessus.

cas:

1. Retour "à la 1519150920" false à partir d'une ligne de gestionnaire d'événement empêche l' navigateur de naviguer à l'adresse de lien, mais il n'empêche pas l'événement de se propager à travers le DOM.
2. Returning false d'un gestionnaire d'événements jQuery empêche le navigateur de naviguer vers l'adresse de lien et il empêche l'événement de se propager à travers le DOM.
3. Retour "à la 1519150920" false à partir d'une DOM gestionnaire d'événement ne fait absolument rien.

Va voir tous les trois exemple.

1. Inline retourne la valeur false.

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='return false'>Click here to visit stackoverflow.com</a>
</div>
<script>
  var link = document.querySelector('a');

  link.addEventListener('click', function() {
    event.currentTarget.innerHTML = 'Click event prevented using inline html'
    alert('Link Clicked');
  });


  function executeParent() {
    alert('Div Clicked');
  }
</script>

2. Retour "à la 1519150920" false de jQuery gestionnaire d'événement.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='https://stackoverflow.com'>Click here to visit stackoverflow.com</a>
</div>
<script>
  $('a').click(function(event) {
    alert('Link Clicked');
    $('a').text('Click event prevented using return FALSE');
    $('a').contents().unwrap();
    return false;
  });
  $('div').click(function(event) {
    alert('Div clicked');
  });
</script>

3. Renvoyant false régulière DOM gestionnaire d'événement.

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
    return false
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

espérons que ces exemples sont clairs. Essayez d'exécuter tous ces exemples dans un fichier html pour voir comment ils fonctionnent.

c'est la citation de ici

événement.preventDefault

la méthode preventDefault empêche un événement de réaliser sa fonctionnalité par défaut. Par exemple, vous utiliseriez preventDefault sur un élément A pour arrêter de cliquer sur cet élément pour quitter la page courante:

//clicking the link will *not* allow the user to leave the page 
myChildElement.onclick = function(e) { 
    e.preventDefault(); 
    console.log('brick me!'); 
};

//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) { 
    console.log('you bricked my child!'); 
};

alors que la fonctionnalité par défaut de l'élément est brickée, l'événement continue à on fait des bulles dans le DOM.

événement.arrêt de la production

la seconde méthode, stopPropagation, permet à la fonctionnalité par défaut de l'événement de se produire mais empêche l'événement de se propager:

//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) { 
    e.stopPropagation();
    console.log('prop stop! no bubbles!'); 
};

//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) { 
    console.log('you will never see this message!'); 
};

stopPropagation empêche efficacement les éléments parents de connaître un événement donné sur son enfant.

alors qu'une simple méthode d'arrêt nous permet de gérer rapidement les événements, c'est important de penser exactement ce que vous voulez faire avec bouillonnement. Je parie que tout ce qu'un développeur veut vraiment, c'est prévenir les erreurs. 90% du temps! "Arrêter" un événement pourrait vous causer de nombreux problèmes sur la ligne; vos plugins peuvent ne pas fonctionner et votre plugins tiers pourrait être muré. Ou pire encore, votre code casse autre fonctionnalité sur un site.

event.preventDefault(); empêche l'action par défaut d'un élément de se produire.

event.stopPropagation(); empêche l'événement de bouillonner dans le DOM tree, empêchant tout handlers parent d'être notifié de l'événement.

par exemple, s'il y a un lien avec une méthode de clic attaché à l'intérieur d'un DIV ou FORM qui a également une méthode de clic attaché, il empêchera la méthode de clic DIV ou FORM de tirer.

de l'Événement.préventdefault-arrête le comportement par défaut du navigateur. Vient maintenant ce qui est le comportement par défaut du navigateur. Supposons que vous avez une balise anchor et qu'elle a un attribut href et que cette balise anchor est imbriquée dans une balise div qui a un événement de clic. Le comportement par défaut de la balise d'ancrage est quand cliqué sur la balise d'ancrage il devrait naviguer, mais quel événement.preventDefault fait est il arrête la navigation dans ce cas. Mais il n'arrête jamais le bouillonnement de l'événement ou l'escalade de l'événement I. e

<div class="container">
 <a href="#" class="element">Click Me!</a>
</div>

$('.container').on('click', function(e) {
 console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  console.log('element was clicked');
});

le résultat sera

"élément est cliqué"

"conteneur cliqué "

maintenant événement.Arrêt il arrête le bouillonnement de l'événement ou l'escalade de l'événement. Maintenant avec l'exemple ci-dessus

$('.container').on('click', function(e) {
  console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  e.stopPropagation(); // Now the event won't bubble up
 console.log('element was clicked');
});

résultat sera

"élément est cliqué"

Pour plus d'informations, consultez ce lien https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation /

$("#but").click(function(event){
console.log("hello");
  event.preventDefault();
 });


$("#foo").click(function(){
 alert("parent click event fired !");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>