porównywanie if parametrów addEventListener

Question

zmienna która przechowuje element html'a, do tej zmiennej dodano "słuchacza" addEventListener, jego warunek czyli ("mousemove") i funkcja która ma się wykonać. Jak sprawdzić za pomocą if'a czy ta zmienna ma addEventListener'a o tym warunku, jeżeli jest on inny niż mousemove ma się wykonać funkcja if'a. w moim przypadku jest to:

tamten element ma domyślnie display: none;

jeżeli najade na element to tamten element ma się wyświetlić (display: block;) jeżeli zjade kursorem z elementu to tamten element ma się shować. 

let button = document.getElementById("showDivVidmo");

button.addEventListener("mousemove", function() {
    let divVidmo = document.getElementById("divVidmo");
    divVidmo.style.display="block";

    if (button === ???) {
        divVidmo.style.display="none";
    }
});

nie wiem jak ma wyglądac składnia w miejscu if (button === ???), zamiast ??? co mam wstawić.

PS: nie wiedziałem jaki dać tytuł pytania

Comments

Jeśli przycisk o id showDivVidmo jest przodkiem lub poprzedzającym rodzeństwem elementu divVidmo, to można to obsłużyć w CSS przez pseudo-klasę :hover.

---

@kajman_Rrzeczny, zobacz jak używać  

const i let w javascript (ES6) – kiedy ich używać?

Answer 1

Jeżeli dobrze zrozumiałem, chcesz, aby po najechaniu myszką na element A - pojawił się element B, a po wyjechaniu myszką poza element A, element B zniknął.

Swoją drogą - nie porównujemy zdarzeń, nie tędy droga. Najpewniej wybrałeś nieodpowiednie z nich do zrealizowania tego, co siedzi w Twojej głowie. Wg. mnie powinieneś wykorzystać mouseover oraz mouseout. Poniżej przykład napisany na kolanie, aby przedstawić o co chodzi.

const trigger = document.getElementById('trigger');
const hiddenElement = document.querySelector('.hiddenElement');
			
trigger.addEventListener('mouseover', function() {
   hiddenElement.classList.add('hiddenElement--visible');
});
			
trigger.addEventListener('mouseout', function() {
   if(hiddenElement.classList.contains('hiddenElement--visible')) {
      hiddenElement.classList.remove('hiddenElement--visible');
   }
});

 

Answer 2

Propozycja. (html i css tylko dla celów pokazowych)                       

<button>show vidmo</button>
<div id="div-vidmo" class="hide"></div>

* {
  box-sizing: border-box;
}
button {
  background-color: rgba(230,230,230,0.8); 
  border: 0;
  font: 2em/2.1em monospace;
  width: 40vw;
  text-align: center;
}
div#div-vidmo {
  margin-top: 1em;
  width: 40vw;
  height: 200px;
  background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
}
.hide {
  display: none;
}

const    button = document.querySelector('button');
const div_vidmo = document.querySelector('#div-vidmo');

['mouseover', 'mouseout'].forEach(event => {
  button.addEventListener(event, () => {
    div_vidmo.classList.toggle('hide');
  })  
});