JavaScriptでイベントハンドラーを削除するにはどうすればよいですか?
JavascriptはremoveEventListener()を提供します イベントハンドラーを削除するメソッド 。イベントはaddEvenetListener()を介して処理されます 方法。 removeEventListener() メソッドは、その addEventListener()にアタッチされているイベントハンドラーを削除します メソッド。
例
<html> <body> <h3 id="add">Hover me </h3> <p id="remove"> </p> <h3>Click this button to stop hovering effect </h3> <input type ="button" id="clickIt" onclick="RespondClick()" value ="remove"> <script> const listener = document.getElementById("add"); listener.addEventListener("mouseover", RespondMouseOver); function RespondMouseOver() { document.getElementById("remove").innerHTML += 1+ "</br>"; } function RespondClick() { listener.removeEventListener("mouseover", RespondMouseOver); document.getElementById("remove").innerHTML += 0; } </script> </body> </html>
上記のコードを実行すると、画面に次のように表示されます
「Hoverme」テキストにカーソルを合わせると、1が表示されます。ホバーした回数、1が生成された回数。テキストを4回ホバーすると、画面上で次のように実行されます。
出力
To stop the event handler, we have to click on the "remove" button. After clicking on the remove button we get '0' displayed on the screen and later on even though we hover on the text no 1's will be produced as shown in the figure.
-
クリックイベントでJavaScript関数を呼び出す方法は?
JavaScriptとHTMLの相互作用は、ユーザーまたはブラウザがページを操作したときに発生するイベントを通じて処理されます。 ページが読み込まれると、イベントと呼ばれます。ユーザーがボタンをクリックすると、クリックしてイベントになります。その他の例としては、任意のキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなどのイベントがあります。 onclick()イベントは、ユーザーがマウスの左ボタンをクリックしたときに発生します。このイベントタイプに対して、検証、警告などを配置します。 例 次のコードを実行して、クリックイベントでJavaScript関数を呼び出すことができ
-
JavaScriptでボタンクリックでli要素を削除するにはどうすればよいですか?
以下が順不同リスト(ul)であるとしましょう- <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <li class="subjectName">MySQL <button>Remove</button></li> <br>