OOP 事件冒泡

Question

我正在尝试使用冒泡事件获取被单击元素的 ID。

  const _elem = new WeakMap();

  class GetItem {

    constructor(e) {

      _elem.set(this, e);

    }

    eventBubblingTest() {

      const targetElement = _elem.get(this).target;

      return targetElement.parentNode.id;

    }

  }

  document.getElementById('parent').addEventListener('click', () => {

    const clickedID = new GetItem(event);

    alert(clickedID);

  });

目前我正在[object Object]作为输出。我的问题是为什么我没有得到被点击的子元素的 ID？

还有没有更简单的方法来编写点击事件监听器？

jsFiddle

Answer 1

好吧，在您当前的代码中，您正在提醒整个班级（您只需创建一个新实例GetItem，然后尝试提醒它）。取而代之的是，如果您想获得parentNode,id属性，则需要为其调用负责的函数。所以你的代码应该是这样的：document.getElementById('parent').addEventListener('click', () => {&nbsp; const clickedID = new GetItem(event);&nbsp; alert(clickedID.eventBubblingTest());});工作演示：const _elem = new WeakMap();const parent = document.getElementById('parent');class GetItem {&nbsp; constructor(e) {&nbsp; &nbsp; _elem.set(this, e);&nbsp; }&nbsp; eventBubblingTest() {&nbsp; &nbsp; const targetElement = _elem.get(this).target;&nbsp; &nbsp; return targetElement.parentNode.id;&nbsp; }}parent.addEventListener('click', () => {&nbsp; const clickedID = new GetItem(event);&nbsp; console.log(clickedID.eventBubblingTest());});#parent {&nbsp; border: 1px solid #f00;&nbsp; display: flex;&nbsp; justify-content: space-evenly;}.product {&nbsp; min-width: 20%;&nbsp; background: #ccc;&nbsp; display: flex;&nbsp; flex-flow: column wrap;&nbsp; align-items: center;&nbsp; margin: 5px;&nbsp; padding: 8px;}img {&nbsp; max-width: 75%;&nbsp; height: auto;}<div id="parent">&nbsp; <div class="product" id="col1">&nbsp; &nbsp; <img src="https://cdn.freebiesupply.com/logos/large/2x/7up-13-logo-png-transparent.png" />&nbsp; &nbsp; <p> Items 1 </p>&nbsp; &nbsp; <button id="buyItem1"> Buy </button>&nbsp; </div>&nbsp; <div class="product" id="col2">&nbsp; &nbsp; <img src="https://cdn.freebiesupply.com/logos/large/2x/7up-13-logo-png-transparent.png" />&nbsp; &nbsp; <p> Items 2 </p>&nbsp; &nbsp; <button id="buyItem2"> Buy </button>&nbsp; </div>&nbsp; <div class="product" id="col3">&nbsp; &nbsp; <img src="https://cdn.freebiesupply.com/logos/large/2x/7up-13-logo-png-transparent.png" />&nbsp; &nbsp; <p id="sas"> Items 3 </p>&nbsp; &nbsp; <button id="buyItem3"> Buy </button>&nbsp; </div></div>