これは私のコードです:addEventListenerを無効にするにはremoveEventListenerを使用する方法?
var element = document.createElement('div');
element.style.height = "100px"
element.style.width = "100px";
element.style.backgroundColor = "red";
var body = document.getElementsByTagName('body')[0];
body.appendChild(element);
function hov() {
element.style.backgroundColor = "blue";
}
element.addEventListener('mouseover', hov);
element.removeEventListener('mouseout', hov);
あなたが見ることができるように、私は赤の背景色でのdiv要素を作成しました。 AddEventListenerは正常に動作し、背景色は青に変更されますが、なぜremoveEventListenerは機能しませんか?なぜdivはまだ青ですか?
あなたが戻って赤に色を返すように関数を作成する必要があります
色を赤に戻す関数を作成する必要があります。 –
'' mouseout''のイベントが登録されていないので、 'removeEventListener'はイベントを削除しません。それがうまくいくなら、それでもあなたの色は赤に変わりません。マウスアウト時に色を赤に設定する別の関数が必要になります。 btwあなたはそのdiv:hover {background:blue;}のためにCSSを使用することができます –
まずはあなたはリスナーを削除していません(*あなたは*にバインドした同じイベントを使用する必要があります)。リスナーを削除しても、リスナー内部で何が起こったのかはわかりません。あなたは、mouseoutイベントのためにもう1つのハンドラを追加するだけで、最初のものが元に戻ったものを元に戻す必要があります。 –