javascript clickとonclickの違い

javascript clickとonclickの違い

javascriptで、両方ともクリックイベントが取得できるclickとonclickの違いを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

clickとonclickの違い

イベントを複数登録できるかできないかの違いがあります。

clickの場合は、複数のイベントを登録して実行することが可能です。

実行結果

onclickの場合は、上書きされてしまいます。

実行結果

onclick属性の場合も同じです。

実行結果

ただしonclick属性は、関数を複数使用できます。

実行結果

コード簡略化

ちなみに、以下のコードは

document.getElementByIdの省略化と関数をアロー化して、簡潔に記述することもできます。