JavaScript でデータ属性にアクセスする方法: `this.typeId` が機能しない理由と代わりに `dataset` を使用する方法

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.typeId),
    subject: this.datatype,
    points: parseInt(this.points),
    user: "H. Pauwelyn"
  });
});</code>

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});</code>

<code class="json">{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }</code>