Помогите правильно перехватить событие

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

[Nexus]

А на css это не сделать? Почему?

[laimas]

Можно ли попроще?

Можно, без JS, в CSS: element:hover {тень}

[AndriiS]

Может там событие клик будет висеть, я не знаю точно. Я хочу понять вот что: можно ли поймать событие на исключительно <li>(на промежуточном элементе), чтобы при наведении на <p> оно не пропадало, тем не менее <p> чтобы продолжало быть ребенком <li>.

<ul>

<li>
<p></p>
</li>

</ul>

[рони]

AndriiS,
css лучше, но если хочется погорячее ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .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);
}

  </style>


</head>

<body>
<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>
 <script>
'use strict';

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

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

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

createArr (button);

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

function handler1 (event) {
  const target = event.target;
  if (target.nodeName == 'LI'&& temp !== target){
   handler2();
   temp = target;
   target.classList.add ('test');
  }

}

clickButton.addEventListener ('mouseleave', handler2);

function handler2 () {
  let target = clickButton.querySelector('.test');
  target && target.classList.remove('test');
  temp = null;
}

  </script>
</body>
</html>