イベントの範囲ループ内のリスナー

Question

内部でのイベントリスナーの動作forLoop？

コードはこの例で動作します。

いずれかの段落を切り替えると、不透明度が低くなり、ストライクスルーします。 いずれかの段落にカーソルを置くと、青色に変わります。

これはどのように達成されたのですか？forループの中には、ブラウザがページをロードした後にが入ります。私は、ブラウザがこのコードをどのように解釈するかを理解しようとしています。

var someTag = document.querySelectorAll("p") 
 

 
for (var i = 0; i < someTag.length; i++) { 
 

 

 
    someTag[i].addEventListener('mouseover', function() { 
 
    this.classList.add("someClass"); 
 
    }); 
 
    someTag[i].addEventListener('mouseout', function() { 
 
    this.classList.remove("someClass"); 
 
    }); 
 

 
    someTag[i].addEventListener('click', function() { 
 
    this.classList.toggle("done"); 
 
    }) 
 

 

 
}

.done { 
 
    text-decoration: line-through; 
 
    opacity: 0.5; 
 
} 
 

 
.someClass { 
 
    color: blue; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 1

あなたが要素にイベントリスナーを追加する場合（後でremoveEventListener()でそれを削除しない限り）、それはその要素に恒久的な変更です。リスナー関数は、要素がイベントをトリガーするたびにブラウザーによって自動的に呼び出されます。リスナーを追加する必要があるのは、リスナーを一度追加するだけです。イベントの今後のすべての発生に反応します。

もう1つ知っておくべきことは、リスナー関数内で、thisがイベントがトリガーされた要素への参照になることです。これは、あなたの機能が、あなたがクリックまたはホバーした段落のクラスを変更する方法です。

Answer 2

最初にこのコードをオフにするのは、これに値を追加しているためです。この場合、この値はあなたの上に乗っている値です。 pタグの上にマウスを置くと、コードは現在のpタグに設定されています。それはiの値とは関係ありません。

下記のフィドルをご覧ください。 JavaScriptで

https://jsfiddle.net/vatsalpande/w1ao28d2/

変数は、iの値は、あなたが蚊帳の外にある場合でも、まだ使用可能であることを意味する機能をスコープしています。したがって、pタグの上にマウスを置くと、iの値は2になります。これは未定義です。フィドルコンソールのログを確認してください。

var someTag = document.querySelectorAll("p") 

//ES5 
for (var i = 0; i < someTag.length; i++) { 


    someTag[i].addEventListener('mouseover', function() { 
console.log(this); 
if(i == 0){ 
    this.classList.add("someClass0"); 
}else if(i == 1){ 
    this.classList.add("someClass1"); 
}else{ 
    console.groupCollapsed(' See Information regarding variable values for mouseover'); 
    console.log(someTag[i]); 
    console.log(i); 
    console.log(this); 
    console.groupEnd(); 
    this.classList.add("someClass2"); 
} 

}); 
someTag[i].addEventListener('mouseout', function() { 
if(i == 0){ 
    this.classList.remove("someClass0"); 
}else if(i == 1){ 
    this.classList.remove("someClass1"); 
}else{ 
    console.groupCollapsed(' See Information regarding variable values for mouseout'); 
    console.log(someTag[i]); 
    console.log(i); 
    console.log(this); 
    console.groupEnd(); 

    this.classList.remove("someClass2"); 
} 

}); 

    someTag[i].addEventListener('click', function() { 
    console.groupCollapsed(' See Information regarding variable values for click'); 
    console.log(someTag[i]); 
    console.log(i); 
    console.log(this); 
    console.groupEnd(); 
this.classList.toggle("done"); 
}) 
} 

しかしES6と、私たちは私たちがスコープブロック与える、キーワード聞かせていると、あなたは、イベントハンドラ内の変数iを使用して、変数の状態を管理する心配することはできません。

https://jsfiddle.net/vatsalpande/53x2LdyL/。

addEventListener（）メソッドは、呼び出されたEventTarget（要素）に指定されたリスナーを登録します。イベントが発生するたびに呼び出されます。