<h2>Using <code>addEventListener()</code> with an <code>options</code> Object as Third Parameter</h2>

<button>Trigger the Click Event</button>

<div class="output">[Click the Button]<br></div>

<p>The event listener for the button appends text to the DIV element above. Due to the <code>once: true</code> property of the <code>options</code> object, the text gets appended only once then the event listener is removed.<p>

body {
  padding: 0 16px;
  font-size: 1.2em;
  text-align: center;
}

.output {
  margin: 20px auto;
  border: 3px dashed #444;
  max-width: 800px;
  padding: 10px;
  line-height: 1.5;
}

p {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

code {
  white-space: nowrap;
  color: firebrick;
}

let btn = document.querySelector('button'),
    op = document.querySelector('.output');

btn.addEventListener('click', function () {
  op.innerHTML += 'Button was clicked';
}, {
  capture: false,
  once: true,
  passive: false
});