javascript addEventListenerとonの違い

javascript addEventListenerとonの違い

javascriptで、addEventListenerとonの違い手順を記述してます。

環境

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

addEventListenerとon

addEventListenerとonの基本的な違いは、イベントを複数登録できるかできないかです。

例えば「onclick」で、以下のように関数を2つ記述すると

<button id="btn">button</button>

<script>

// document.getElementById( "btn" )は省略してます。

btn.onclick = function hoge(){
  console.log('test1')
}

btn.onclick = function foo(){
  console.log('test2')
}

</script>

ボタンをクリックすると、結果が上書きされ「test2」としか表示されません。

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

<button class="btn" onclick="hoge()">button</button>

<script>

function hoge(){
  console.log('test1')
}

function hoge(){
  console.log('test2')
}

</script>

「addEventListener」の場合は、2つとも実行されます。

<button id="btn">button</button>

<script>

// document.getElementById( "btn" )は省略してます。

btn.addEventListener("click", function() {
  console.log("test1");
});

btn.addEventListener("click", function() {
  console.log("test2");
});

</script>

実行結果

onclickで複数実行

onclickやonclick属性で、複数の関数を実行したい場合は、以下ようにします。

onclickの場合

<button id="btn">button</button>

<script>

btn.onclick = function hoge(){
  console.log('test1')
  foo()
}

function foo(){
  console.log('test2')
}

</script>

onclick属性の場合

<button class="btn" onclick="hoge();foo();">button</button>

<script>

function hoge(){
  console.log('test1')
}

function foo(){
  console.log('test2')
}

</script>