событие onclick запускается автоматически - PullRequest
Новая
       9

событие onclick запускается автоматически

0 голосов
/ 25 апреля 2018

У меня есть этот код с обработчиком onclick и IIFE . 

var btn = document.getElementById("btn");
btn.onclick = function clickHandler(){console.log("Button clicked"); } 

//btn.onclick = function clickHandler(){console.log("Now clicked"); };

(function(){
    console.log("Hello");
})();

Проблема в том, что clickHandler автоматически вызывается после загрузки страницы и IIFE не вызывается . Однако при комментировании строки 2 и при отмене комментариев в строке 3 (строка с комментариями в приведенном выше коде) код работает должным образом.

Единственная разница между двумя строками состоит в том, что во 2-й строке нет ; в конце, а в 3-й строке есть.

Кроме того, если я удаляю IIFE и оставляю остальную часть кода без изменений, код работает нормально.

Демо: https://codepen.io/anon/pen/Pezpqv

Ответы [ 3 ]

0 голосов
/ 25 апреля 2018

Это сложно.Поскольку точка с запятой отсутствует во второй строке вашего кода, синтаксический анализатор на этом не останавливается - и использует все возможные токены.В конце код анализируется как ... 

btn.onclick = function clickHandler() {
  console.log("Button clicked");
}(
  //btn.onclick = function clickHandler(){console.log("Now clicked"); };

  function() {
    console.log("Hello");
  }
)
();

Обратите внимание на разницу, которую создает () - ваше функциональное выражение вызывается немедленно .Забавно, что ...

function() { console.log('Hello') }

... рассматривается как значение параметра, которое в любом случае игнорируется.

После этого результат clickHandlerПопытка повторного использования в качестве функции - но, поскольку он возвращает undefined, JS останавливается с (intermediate value)(...) is not a function.

Думал, что будет хорошей идеей немного изменить ваш код - и сделал следующеефрагмент, чтобы проиллюстрировать идею с большим количеством драмы. 

const btn = document.getElementById('btn');
btn.onclick = function clickHandler(e) {
  console.log('Now clicked');
  return e;
}
  
//btn.onclick = function clickHandler(){console.log("Now clicked"); };

(function() {
  console.log('Hi!');
})();
<button type="button" id="btn">Click me!</button>

Покажите это своим коллегам и задайте тот же вопрос (почему здесь не работает обработчик кликов?), Если вы хотите сделать их немного ...без ума.)

0 голосов
/ 25 апреля 2018

Проблема заключается в запуске кода с (, в то время как предыдущая строка кода не заканчивается точкой с запятой (;). Это обрабатывает обе строки кодов, которые должны выполняться вместе, как:

}(

Чтобы решить эту проблему, вы должны поставить ; в конце Statemnet или переместить код IIFE в верхнюю часть кода: 

(function(){
    console.log("Hello");
})();
var btn = document.getElementById("btn");
  btn.onclick = function clickHandler(){console.log("Button clicked"); 
}
<button type="button" id="btn" >Click</button>
0 голосов
/ 25 апреля 2018

Вы пропустили здесь полуколонну 

btn.onclick = function clickHandler(){console.log("Button clicked"); } ;
...