Почему событие click срабатывает автоматически? JS

Question

Столкнулся с такой проблемой:

При назначении события click на какой-либо элемент при открытии веб-страницы этот самый клик срабатывает автоматически.

Ещё один случай, бывает, что click, назначенный конкретному элементу, срабатывает при клике вообще в любом месте документа.

Для примера:

<div id="block"></div>

let block = document.querySelector('#block');
block.addEventListener('click', Test());

function Test() {
   alert('Какое-то сообщение');
}

Так вот, при загрузке страницы сразу же сработает alert, без клика по элементу block.

По моим наблюдениям, если HTML элементов на странице несколько, то в таком случае click будет срабатывать по любому месту экрана и вызывать соответствующую функцию.

В чем проблема, и как её можно решить?

Answer 1

block.addEventListener('click', Test);

click, назначенный конкретному элементу, срабатывает при клике вообще в любом месте документа

Этого в приведенном коде нет.

Answer 2

addEventListener вторым аргументом принимает функцию, а не результат выполнения работы функции

const block = document.querySelector('#block');
block.addEventListener('click', test);

function test() {
   console.log('Какое-то сообщение');
}

#block {
  cursor: pointer;
  display: inline-block;
}

<div id="block">Какой-то блок</div>

Answer 3

Если Вы просто хотите вызвать функцию Test на событие "click":

block.addEventListener("click", Test)

Если Вы хотите передать параметры в функцию Test:

block.addEventListener("click", () => Test(arg1, arg2))

// или

block.addEventListener("click", function () { Test(arg1, arg2) })

Отдельно стоит отметить что на вид Ваша функция Test не является конструктором, поэтому называть ее с большой буквы особого смысла нет.

Вы безусловно можете так делать, но это будет путать других разработчиков.

БЛОГ НА HUSL

Почему событие click срабатывает автоматически? JS

Ответы (3 шт):