How to bind an event to each element in a list?

Question

JavaScript

For example:

<ul>
  <li name="one">1</li>
  <li name="two">2</li>
  <li name="three">3</li>
  <li name="four">4</li>
  <li name="five">5</li>
  <li name="six">6</li>
</ul>

Each element limust be written -

onMouseOver={() => this.hover(event.target.getAttribute('name'))}
  onMouseOut={() => this.hover(false)}

There are a lot of elements, is it possible to specify these events without assigning them to each element?

Answer 1

delegation only if.

Answer 2

It's OK. Only visually it seems that we are hanging an event on each element. In fact, React is much smarter. He delegates them himself.

Answer 3

<ul onclick= "fn(event)">
  <li name="one">1</li>
  <li name="two">2</li>
  <li name="three">3</li>
  <li name="four">4</li>
  <li name="five">5</li>
  <li name="six">6</li>
</ul>
<script>
function fn (e) {
  alert(e.target.textContent);
  e.stopPropagation();
}
</script>