прослушиватель событий мыши не работает в ванильном JavaScript

#javascript #html #css

Вопрос:

Я работаю над простой игрой в качестве упражнения проекта Odin под названием «ВЫТРАВИТЬ ЭСКИЗ». Когда мышь перемещается по квадратам, они должны менять цвет. Но я не могу заставить событие onmouseover работать. Как вы думаете, в чем проблема?

index.html

     <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link rel="stylesheet" href="style.css" />
            <title>ETCH-A-SKETCH</title>
        </head>
        <body>
            <div class="container"></div>
    
            <script src="app.js"></script>
        </body>
    </html>

app.js

 const body = document.querySelector('body');
const Btn = document.createElement('button');
const container = document.querySelector('.container');
const squares = document.querySelectorAll('.square');
body.append(Btn);
body.insertBefore(Btn, container);
Btn.innerText = 'Create A New Grid';

....

squares.forEach((square) => {
    square.addEventListener('onmouseover', (e) => {
        console.log(e);
        e.preventDefault();
        square.classList.add('zapper');
    });
});

style.css

 .zapper {
    background-color: #fff;
}

.zapper:hover {
    background-color: black;
}

1. 'onmouseover' -> 'mouseover'

2. Вы используете on префикс при объявлении события в html (т. Е.: <div onclick=func()> но опускаете при объявлении в addEventListener конструкторе

3. Вы хотите изменить цвет с помощью CSS, а не Javascript.

4. @connexo Что вы предлагаете? квадрат.стиль.цвет фона = ‘черный’ ?? Это нормально, за исключением того, что событие мыши не запускается для его реализации.

Ответ №1:

если вы используете прослушиватели событий, этого mouseover не должно быть onmouseover

подобный этому:

 square.addEventListener('mouseover', (e) => {

если вы хотите использовать onmouseover , он должен использоваться в html-атрибутах, подобных этому

 <button onmouseover="functionName()">

on префикс используется для атрибутов html, удалите on , когда вы используете прослушиватели событий

Ответ №2:

проблема в том, что JavaScript работает очень быстро. В основном происходит то, что код yow завершается до отображения dom, когда он хочет добавить событие en к элементам yow, их все еще нет на экране. Вам нужно указать JavaScript, чтобы добавить прослушиватель после подключения dom

 
window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');

const body = document.querySelector('body');
const Btn = document.createElement('button');
const container = document.querySelector('.container');
const squares = document.querySelectorAll('.square');
body.append(Btn);
body.insertBefore(Btn, container);
Btn.innerText = 'Create A New Grid';

....

squares.forEach((square) => {
    square.addEventListener('onmouseover', (e) => {
        console.log(e);
        e.preventDefault();
        square.classList.add('zapper');
    });
});

});