[AndriiS]

Здравствуйте, коллеги! :-)

Помогите пожалуйста с перехватом события там где нужно.

Есть карточки. Нужно навел на карточку курсор (mouseover), - появилась тень, убрал курсор, - пропала тень.

1. Я реализовал путем навешивания двух addEventListener на один элемент двух функций. Можно ли попроще?

2. Внутри карточки есть ребенок <p>, - при наведении точно на него, событие не происходит. Как сделать так, чтобы addEventListener навесить на родителя <ul> и отлавливать события только на карточках <li>, игнорируя внутренние <p>?

Спасибо!

<nav class="main__menu">
                <ul class="main__menu__list">
                    <li class="main__menu__list__item js__button">
                        <p clas="main__menu__content">I am</p>
                    </li>
                    <li class="main__menu__list__item js__button">
                        <p clas="main__menu__content">I have</p>
                    </li>
                    <li class="main__menu__list__item js__button">
                        <p clas="main__menu__content">I know</p>
                    </li>
                    <li class="main__menu__list__item js__button">
                        <p clas="main__menu__content">I want</p>
                    </li>
                    <li class="main__menu__list__item js__button">
                        <p clas="main__menu__content">I dream</p>
                    </li>
                    <li class="main__menu__list__item js__button">
                        <p clas="main__menu__content">Lorem</p>
                    </li>
                    <li class="main__menu__list__item js__button">
                        <p clas="main__menu__content">Lorem</p>
                    </li>
                    <li class="main__menu__list__item js__button">
                        <p clas="main__menu__content">Lorem</p>
                    </li>
                    <li class="main__menu__list__item js__button">
                        <p clas="main__menu__content">Lorem</p>
                    </li>
             
                </ul>
            </nav>

.main__menu__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.main__menu__list__item {
    width: 100px;
    height: 100px;
    list-style-type: none;
    font-weight: bolder;
    font-family: Tahoma;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    background-color: #69B8E7;
    text-transform: uppercase;
    color: white;
    font-size: 1em;
    text-shadow: 2px 2px blue;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.3rem;
    cursor: pointer;
    /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); */
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}



.test {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

'use strict';

const button = document.querySelectorAll ('.js__button');

function createColor () {
  const R = Math.random () * 256;
  const G = Math.random () * 256;
  const B = Math.random () * 256;
  return `rgb(${R},${G},${B})`;
}

function createArr (arr) {
  const colorArr = [
    createColor (),
    createColor (),
    createColor (),
    createColor (),
    createColor (),
    createColor (),
    createColor (),
    createColor (),
    createColor (),
  ];
  colorArr.forEach (function (item, i) {
    arr[i].style.backgroundColor = item;
  });
}

createArr (button);

const clickButton = document.querySelector ('.main__menu__list');
clickButton.addEventListener ('mouseover', handler1);

function handler1 (event) {
  const target = event.target;
  if (target.nodeName !== 'LI') return;
  target.classList.add ('test');
  //   target.classList.remove('test');
  console.log (target);
}

clickButton.addEventListener ('mouseout', handler2);

function handler2 (event) {
  const target = event.target;
  if (target.nodeName !== 'LI') return;
  //   target.classList.add('test');
  target.classList.remove ('test');
  console.log (target);
}