Ce qui est remontée d'événements et la capture?

De remontée d'événements et la capture de deux façons de la propagation de l'évènement dans le DOM HTML API, lorsqu'un événement se produit dans un élément à l'intérieur d'un autre élément, et les deux éléments ont enregistré une poignée pour cet événement. La propagation de l'évènement mode détermine dans quel ordre les éléments reçoivent l'événement.

Avec le bouillonnement, l'événement est d'abord capturé et géré par le centre le plus intime de l'élément et ensuite propagée à l'extérieur des éléments.

Avec la capture, l'événement est d'abord capturé par les ultrapériphériques de l'élément et propagées à l'intérieur des éléments.

De capture est également appelée "goutte à goutte", qui permet de rappeler la propagation de l'ordre:

de descendre, remonter

De retour dans les vieux jours, Netscape plaidé en cas de capture, tandis que Microsoft promu de remontée d'événements. Les deux font partie de la W3C Modèle D'Objet De Document Événements standard (2000).

IE < 9 utilise seulement remontée d'événements, alors que IE9+, et tous les principaux navigateurs prennent en charge à la fois. D'autre part, la la performance de remontée d'événements peut être légèrement inférieure complexes DOMs.

Nous pouvons utiliser la addEventListener(type, listener, useCapture) pour enregistrer les gestionnaires d'événements dans la bouillonnante (par défaut) ou en mode de capture. L'utilisation de la capture de modèle de passer le troisième argument comme true.

Exemple

<div>
    <ul>
        <li></li>
    </ul>
</div>

Dans la structure ci-dessus, supposons qu'un clic événement dans le li élément.

Dans la saisie du modèle, l'événement sera assurée par la div première (cliquez sur les gestionnaires d'événements dans le div va tirer le premier), puis dans la ul, puis lors de la dernière dans l'élément cible, li.

Dans le bouillonnement de modèle, le contraire qui se produira: l'événement sera d'abord traitée par le li, puis par la ul, et enfin par le div élément.

Pour plus d'informations, voir

• Ordre Des Événements sur QuirksMode
• la méthode addEventListener sur MDN
• Les Événements Avancé sur QuirksMode

Dans l'exemple ci-dessous, si vous cliquez sur l'un des éléments mis en évidence, vous pouvez voir que la capture de la phase de l'événement de propagation de l'écoulement se produit en premier, suivie par la phase de propagation.

JS:

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML += ('<p>' + msg + '</p>');
}

function capture() {
    log('capture: ' + this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: ' + this.firstChild.nodeValue.trim());
}

function clearOutput() {
    logElement.innerHTML = "";
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);

CSS:

p {
    line-height: 0;
}

div {
    display:inline-block;
    padding: 5px;

    background: #fff;
    border: 1px solid #aaa;
    cursor: pointer;
}

div:hover {
    border: 1px solid #faa;
    background: #fdd;
}

HTML:

<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>

Un autre exemple à JSFiddle.

Si il y a deux éléments de l'élément 1 et l'élément 2. Élément 2 est à l'intérieur de l'élément 1 et de nous associer un gestionnaire d'événement à la fois les éléments permet de dire onClick. Maintenant, lorsque l'on clique sur l'élément 2, puis gestionnaire d'événements pour les deux éléments seront exécutées. Maintenant, voici la question est de savoir dans quel ordre les événements à exécuter. Si l'événement s'est attaché à l'élément 1 est exécutée en premier lieu, il est appelé événement de capture et si l'événement attaché à l'élément 2 s'exécute en premier, cela s'appelle de remontée d'événements.
Comme par le W3C au début de l'événement dans la capture de phase jusqu'à ce qu'il atteigne la cible revient à l'élément et ensuite il commence à bouillonner

La capture et la formation de bulles d'etats par la useCapture paramètre de la méthode addEventListener

eventTarget.la méthode addEventListener(type,à l'écoute,[,useCapture]);

Par Défaut useCapture est faux. Cela signifie qu'il est dans la phase de propagation.

JS:

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");

div1.addEventListener("click", function (event) {
  alert("you clicked on div 1");
}, true);

div2.addEventListener("click", function (event) {
  alert("you clicked on div 2");
}, false);

CSS:

#div1{
  background-color:red;
  padding: 24px;
}

#div2{
  background-color:green;
}

HTML:

<div id="div1">
  div 1
  <div id="div2">
    div 2
  </div>
</div>

S'il vous plaît essayer avec l'évolution de vrai et de faux.

Il y a aussi le Événement.eventPhase une propriété qui peut vous dire si l'événement correspond à la cible ou vient d'ailleurs.

Noter que la compatibilité avec les navigateurs n'est pas encore déterminé. Je l'ai testé sur Chrome (66.0.3359.181) et Firefox (59.0.3) et il est pris en charge là.

Expansion sur le déjà grand extrait de de la accepté de répondre à, c'est la sortie à l'aide de la eventPhase propriété

JS:

var logElement = document.getElementById('log');

function log(msg) {
  if (logElement.innerHTML == "<p>No logs</p>")
    logElement.innerHTML = "";
  logElement.innerHTML += ('<p>' + msg + '</p>');
}

function humanizeEvent(eventPhase){
  switch(eventPhase){
    case 1: //Event.CAPTURING_PHASE
      return "Event is being propagated through the target's ancestor objects";
    case 2: //Event.AT_TARGET
      return "The event has arrived at the event's target";
    case 3: //Event.BUBBLING_PHASE
      return "The event is propagating back up through the target's ancestors in reverse order";
  }
}
function capture(e) {
  log('capture: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

function bubble(e) {
  log('bubble: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', capture, true);
  divs[i].addEventListener('click', bubble, false);
}

CSS:

p {
    line-height: 0;
}

div {
    display:inline-block;
    padding: 5px;

    background: #fff;
    border: 1px solid #aaa;
    cursor: pointer;
}

div:hover {
    border: 1px solid #faa;
    background: #fdd;
}

HTML:

<div>1
  <div>2
    <div>3
      <div>4
        <div>5</div>
      </div>
    </div>
  </div>
</div>
<button onclick="document.getElementById('log').innerHTML = '<p>No logs</p>';">Clear logs</button>
<section id="log"></section>