Событие клика по Javascript с вложенным элементом

Question

Я хочу спросить, как правильно выбрать element. Когда я нажимаю на значок, он дает мне элемент тега i, но вкладывается в тег anchor. Какой подход правильный:

// First Approach
if(e.target.parentElement.dataset.role === 'edit') {
 // Do something
}

// Second Approach
if(e.target.dataset.role === 'edit') {
 // Do something
}

<li>
 <a href="#" class="secondary-content" data-role="edit"> <!-- Parent element -->
  <i class="fa fa-pencil"></i> <!-- nested edit icon -->
 </a>
</li>

Answer 1

Свойством target объекта события будет элемент, по которому щелкнули.

Используйте currentTarget, чтобы получить элемент, к которому был привязан обработчик события.

document.querySelector("button").addEventListener("click", handler);

function handler(event) {
  console.log(event.currentTarget.dataset.role);
}

span {
  background: yellow
}

<ul>
  <li>
    <button data-role="edit">
      Click Me
      <span>Click Me</span>
     </button>
  </li>
</ul>

Answer 2

Вы можете просто добавить уникальный идентификатор к своему элементу i, <i id=“some-id ” class=“fa fa-pencil”> и может сделать что-то вроде:

document.querySelector(‘#some-id’)

Или

document.getElementById(‘some-id’)

Или

document.querySelector(‘a i.fa-pencil’) или что-то в этом роде.