<div>
<p>イベントリスナーで設定したイベント</p>
<button id="btn1">クリック!</button>
</div>
<div>
<p>イベントハンドラーで設定したイベント</p>
<button id="btn2">クリック!</button>
</div>
*{
  text-align:center;
}

div{
  margin-top:30px;
}
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');

btn1.addEventListener('click',function(){
  this.insertAdjacentHTML('afterend', '<p>1つ目のイベント処理</p>');
})
btn1.addEventListener('click',function(){
  this.insertAdjacentHTML('afterend', '<p>2つ目のイベント処理</p>');
})


btn2.onclick = function(){
  this.insertAdjacentHTML('afterend', '<p>1つ目のイベント処理/p>');
}

btn2.onclick = function(){
  this.insertAdjacentHTML('afterend', '<p>2つ目のイベント処理</p>');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.