Javascript Events addEventListener Последний параметр

Q) Я хочу сказать, что всякий раз, когда я добавляю последний параметр addEventListener как true, так и false, в обоих случаях объект события (e.target) остается таким же, как img, в приведенном ниже коде вы можете видеть я поставил последний параметр истинный, что означает захват, но все еще в console.log пузырь верно, вот заблуждение меняJavascript Events addEventListener Последний параметр

document.querySelector('.grid').addEventListener('click', function (e) { 
 
    console.log(e); 
 
    console.log(e.target + " " + this.className); 
 
},true)

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>JavaScript Events</title> 
 
    <link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
    <div id="art"> 
 
    <h2>Art Eliminator</h2> 
 
    <p>Pick your favorite piece of art through the process of elimination. Click on the pieces you like the least until you are left with a single one. Click on the last image to get some info</p> 
 
    <ul class="grid"> 
 
     <li><img src="images/Hassum_Harrod_03_tn.jpg" alt="Hassum Harod's Summer Trees"></li> 
 
     <li><img src="images/LaVonne_LaRue_02_tn.jpg" alt="LaVonne LaRue's Mighty Duck"></li> 
 
     <li><img src="images/Lorenzo_Garcia_01_tn.jpg" alt="Lorenzo Garcia's The Dancer"></li> 
 
     <li><img src="images/Jennifer_Jerome_01_tn.jpg" alt="Jennifer Jerome's A day of Rest'"></li> 
 
     <li><img src="images/Constance_Smith_03_tn.jpg" alt="Constance Smith's Letterforms"></li> 
 
     <li><img src="images/LaVonne_LaRue_04_tn.jpg" alt="LaVonne LaRue's Flow"></li> 
 
     <li><img src="images/Lorenzo_Garcia_03_tn.jpg" alt="Lorenzo Garcia's Mother"></li> 
 
     <li><img src="images/Jennifer_Jerome_02_tn.jpg" alt="Jennifer Jerome's Farm Life"></li> 
 
     <li><img src="images/Hillary_Goldwynn_03_tn.jpg" alt="Hillary Goldwynn's Blue Sky"></li> 
 
    </ul> 
 
    </div> 
 
    <script src="script.js"></script> 
 
</body> 
 
</html>

источник

2017-01-24 Haseeb Jumani

Что * конкретно * вы видите на выходе 'console.log', который вас смущает? –

bubble = true в аргументах истинного и ложного параметров. –

В выводе нет 'bubble = true'. Там '' пузыри ": true', который я рассмотрел в моем ответе ниже. –

, в коде ниже вы можете увидеть, что я положил последний параметр true, что означает захват, но все же в console.log пузырь верно, вот заблуждение меня

Если это "bubbles": true, часть, которая вас в заблуждение, все это говорит о том, что это событие (click) это событие, пузыри; это не говорит, что это в настоящее время пузыри. bubbles всегда будет иметь значение для click. Часть, в которой говорится, какая фаза событий вы видите, находится в eventPhase; см. Event interface.

const unsigned short NONE = 0; 
const unsigned short CAPTURING_PHASE = 1; 
const unsigned short AT_TARGET = 2; 
const unsigned short BUBBLING_PHASE = 3; 
readonly attribute unsigned short eventPhase

Так eventPhase 1 для захвата, 2, когда событие на цель, и 3 при барботировании.

всякий раз, когда я положил последний параметр addEventListener либо истинным, либо ложным как в ситуации, цель мероприятия (e.target) остаются такими же т.е. IMG

фазы вы крючок не имеет никакого влияния на элемент на котором вы подключили событие. Все, что меняется, - , когда вы получаете событие. Эта диаграмма из слегка устаревшей DOM3 Events spec помогает картине захвату против пропускания:

Как вы можете видеть, когда событие происходит, первое событие захваченной и вытекает из корня (окон) через документ и всех предков к целевому элементу (.gridul в вашем случае); затем он пузырится обратно через предков и документ обратно в окно.

Вот простой фрагмент кода демонстрирует это:

// Hook both capture and bubble on the inner and outer elements: 
 
var target = document.getElementById("target"); 
 
var inner = document.getElementById("inner"); 
 
var outer = document.getElementById("outer"); 
 

 
target.addEventListener("click", function(e) { 
 
    showEvent("target capture", e); 
 
}, true); 
 
target.addEventListener("click", function(e) { 
 
    showEvent("target bubble", e); 
 
}, false); 
 

 
inner.addEventListener("click", function(e) { 
 
    showEvent("inner capture", e); 
 
}, true); 
 
inner.addEventListener("click", function(e) { 
 
    showEvent("inner bubble", e); 
 
}, false); 
 

 
outer.addEventListener("click", function(e) { 
 
    showEvent("outer capture", e); 
 
}, true); 
 
outer.addEventListener("click", function(e) { 
 
    showEvent("outer bubble", e); 
 
}, false); 
 

 
function showEvent(label, e) { 
 
    // e.eventPhase will be: 
 
    // * 1 when capturing 
 
    // * 2 at the target element 
 
    // * 3 when bubbling 
 
    console.log(label + ": eventPhase = " + e.eventPhase); 
 
    // Now showing e.bubbles because it's always 
 
    // true for clicks 
 
}

.as-console-wrapper { 
 
    max-height: 80% !important; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    <div id="target"> 
 
     Click this div 
 
    </div> 
 
    </div> 
 
</div>

99,99% времени, мы зацепить фазы восходящей цепочки. Это, как правило, более полезно из двух, и мы привыкли к этому, поскольку IE до IE9 не поддерживал фазу захвата (а IE9-IE11 все еще не работает, когда они находятся в режиме «совместимости»).

источник

2017-01-24 10:24:04

Javascript Events addEventListener Последний параметр

ответ

Смежные вопросы