なぜ私のevent.targetが機能していないのですか？

Question

なぜ私のevent.targetが機能していないのですか？

問題を見つけるために私を助けてください[OK]を、私のhtmlがある

<input type="text"> 

私のCSSは、私は、入力をクリックしたら、今

​​

と私のjs、

const input = document.querySelector('input'); 
input.addEventListener('click', (e) => { 
    if (e.target.tagName === 'INPUT') { 
    input.className = "bg"; 
    } else { 
    input.className = ""; 
    } 
}); 

です要素 "bg"クラス名が追加されますが、入力要素の外側をクリックすると、なぜ削除されないのですか？あなたはinputオブジェクトにclickイベントリスナーを追加しているので、

Answer 1

CSS擬似セレクター:focusを使用し、イベントを追加すると、すべてであなたの目的のために必要とされていない代わりにしてみてください一緒に。

ここにコードがあります。このようにして、入力要素がフォーカスを失ったときにクラスを削除することができます。

const input = document.querySelector('input'); 
 

 
function inputBGHandler(e) { 
 
    if (e.type === "focus") { 
 
    input.className = "bg"; 
 
} else { 
 
    input.className = ""; 
 
} 
 
} 
 

 
input.addEventListener('focus', inputBGHandler); 
 
input.addEventListener('blur', inputBGHandler);

.bg { 
 
    background-color:#777; 
 
    outline:none; 
 
    border:solid 2px tomato; 
 
}

<input type="text">

Answer 2

thatsのは、そうe.target.tagNameあなたがdocument/bodyにイベントリスナーを追加する場合、それは動作しますが、常に"INPUT"です。しかし、

は、この使用してJavascriptを達成したいならば、あなたがフォーカスとブラーのイベントを使用する必要があります

input:focus { 
    background-color:#777; 
    outline:none; 
    border:solid 2px tomato; 
}