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', () => {

  const clickedID = new GetItem(event);

  alert(clickedID.eventBubblingTest());

});

工作演示：

const _elem = new WeakMap();

const parent = document.getElementById('parent');

class GetItem {

  constructor(e) {

    _elem.set(this, e);

  }

  eventBubblingTest() {

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

    return targetElement.parentNode.id;

  }

}

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

  const clickedID = new GetItem(event);

  console.log(clickedID.eventBubblingTest());

});

#parent {

  border: 1px solid #f00;

  display: flex;

  justify-content: space-evenly;

}

.product {

  min-width: 20%;

  background: #ccc;

  display: flex;

  flex-flow: column wrap;

  align-items: center;

  margin: 5px;

  padding: 8px;

}

img {

  max-width: 75%;

  height: auto;

}

<div id="parent">

  <div class="product" id="col1">

    <img src="https://cdn.freebiesupply.com/logos/large/2x/7up-13-logo-png-transparent.png" />

    <p> Items 1 </p>

    <button id="buyItem1"> Buy </button>

  </div>

  <div class="product" id="col2">

    <img src="https://cdn.freebiesupply.com/logos/large/2x/7up-13-logo-png-transparent.png" />

    <p> Items 2 </p>

    <button id="buyItem2"> Buy </button>

  </div>

  <div class="product" id="col3">

    <img src="https://cdn.freebiesupply.com/logos/large/2x/7up-13-logo-png-transparent.png" />

    <p id="sas"> Items 3 </p>

    <button id="buyItem3"> Buy </button>

  </div>

</div>