JavaScript onclickでイベントを削除する方法
環境
Google Chrome 115.0.5790.171(Official Build) (64 ビット)
Windows 11 Pro 64bit
書式
1.イベントを登録する
document.getElementById(セレクターID名).onclick = function (){ 処理コード}
2.イベントを削除する
document.getElementById(セレクターID名).onclick = null
使用例
<!DOCTYPE html>
<html>
<body>
<button id="btnadd">追加</button>
<p>
<button id="btndel" onclick="test()">除去</button></p>
<script>
document.getElementById("btnadd").onclick = function (){
console.log('test 222');
}
function test(){
document.getElementById("btnadd").onclick = null
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<button id="btnadd">追加</button>
<p>
<button id="btndel" onclick="test()">除去</button></p>
<script>
document.getElementById("btnadd").onclick = function (){
console.log('test 222');
}
function test(){
document.getElementById("btnadd").onclick = null
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <button id="btnadd">追加</button> <p> <button id="btndel" onclick="test()">除去</button></p> <script> document.getElementById("btnadd").onclick = function (){ console.log('test 222'); } function test(){ document.getElementById("btnadd").onclick = null } </script> </body> </html>
実行結果
「追加」ボタンを押下すると、イベントを登録します。
「除去」ボタンを押下すると、イベントを除去します。