dom - 将事件监听器绑定到 ES6 对象

Question

我有一个 dom 元素的类：

class Comment{
  constructor(id, node, text){
    this.id = id;
    this.node = node;
    this.text = text;

    this.element = document.createElement('div');
    this.element.className = 'comment-container-div';
    this.element.innerHTML = `
            <div class="sub-div-1">
              <div class="sub-div-2">
                <div class="sub-div-3">
                </div>
              </div>
            </div>`;

    this.element.addEventListener('mouseenter', this.hoverComment.bind(this),false);
  }

  hoverComment(){
    do stuff;
  }
}

如您所见，我是否想将事件侦听器绑定到顶部容器 div，例如：

    this.element.addEventListener('mouseenter', this.hoverComment.bind(this),false);

我的问题是如何将事件侦听器绑定到 sub-div-2？我不能这样做 this.element.querySelectorAll('.sub-div-2').addEventListener(...)，因为它会引发类似“this.element.querySelectorAll(...).addEventListener is not a功能”

如何将事件侦听器绑定到 sub-div-2？谢谢。

编辑：有多个评论，所以显然我不想选择所有有这个类的 div，而只选择那些是这个对象的孩子的。因此，悬停只影响悬停的 1 条评论，而不是所有评论。

标签： domecmascript-6addeventlisteneres6-class