3

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

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

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

Для примера:

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

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


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

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

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

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

Vasily
  • 11,547
daniilsq-tech
  • 31

3 Answers3

3

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

block.addEventListener("click", Test)

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

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

// или


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

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

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

Vasily
  • 11,547
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>
Михаил Камахин
  • 8,729
  • "а не результат ... функции" - ?? function test() { return function() {alert("test");}; } block.addEventListener('click', test()); –  Sep 08 '20 at 17:53
  • 1
    @Igor мне кажется, такое новичкам не надо пытаться понять так рано, они только сильно запутаются – Михаил Камахин Sep 08 '20 at 17:55
  • Если не передаёте вашей функции аргументов, то указывать её надо без скобок block.addEventListener('click', Test); А так как у вас, вы её по-сути запускаете сразу, а не привязываете к событию click. – Quazimorda Sep 09 '20 at 06:44
1
block.addEventListener('click', Test);

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

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