binding event listeners to ES6 objects

Question

I have a class for a dom element:

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;
  }
}

As you can see if I want to bind an event listener to the top container div, I do for example:

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

My question is how do i bind an event listener to sub-div-2? I can't do this.element.querySelectorAll('.sub-div-2').addEventListener(...), since it throws an error like "this.element.querySelectorAll(...).addEventListener is not a function"

How can i bind the event listener to sub-div-2? Thanks.

Edit: There is multiple comments, so obviously i dont want to select all divs that have this class, but only the ones which are children of this object. So that a hover affects only the 1 comment hovered and not all of them.

Use `this.element.querySelector()` to find a single element. `this.element.querySelectorAll()` returns a NodeList, and you can iterate the nodes with `NodeList.forEach()`, and attach an event listener to each one. Another option is to use event delegation. — Ori Drori, Jan 23 '20 at 18:32

binding event listeners to ES6 objects

0 Answers0