Не удается прочитать свойство 'target' из undefined - кнопки HTML

Question

Почему я получаю эту ошибку?

Cannot read property 'target' of undefined
  at btn

Я объявляю btn() в моем html-файле. У меня есть несколько кнопок в HTML, вызывая btn().

function btn(event){        
  var theTarget = event.target;
  alert(theTarget.tagName);
}

Answer 1

Есть несколько вариантов, как сделать это, и каждый ведет себя по-разному.

Опция 1 Установите onclick="btn(this)" на кнопке. Это всегда передает саму кнопку в качестве аргумента. Другие параметры передают событие в отличие от самого элемента.

function btn(elem) {
  var theTarget = elem;
  console.log(theTarget.id);
}

<p>
  Option 1:
  <button id="the-button" onclick="btn(this)">
    btn(this)
    <span id="the-span" style="border: 1px solid red">This is a span</span>
  </button>
</p>

Опция 2 Установите onclick="btn(event)" на кнопке. Это передает событие, и event.target будет элементом, по которому щелкают. Например, событие, ссылающееся на span внутри кнопки, будет пропущено при нажатии.

function btn(evt) {
  var theTarget = evt.target;
  console.log(theTarget.id);
}

<p>
  Option 2:
  <button id="the-button" onclick="btn(event)">
    btn(event)
    <span id="the-span" style="border: 1px solid red">This is a span</span>
  </button>
</p>
</p>

Опция 3 Установка атрибута id для кнопки. Затем привяжите обработчик событий к кнопке с помощью JavaScript. Это ведет себя как вариант 2 в отношении того, как событие ссылается на дочерние элементы.

function btn(evt) {
  var theTarget = evt.target;
  console.log(theTarget.id);
}

document.getElementById('the-button').onclick = btn;

<p>
  Option 3:
  <button id="the-button">
    binding
    <span id="the-span" style="border: 1px solid red">This is a span</span>
  </button>
</p>

Вот фрагмент со всеми тремя опциями в одной программе:

function btn(evt) {
  var theTarget = evt.target || evt;
  console.log(theTarget.id);
}

document.getElementById('third-button').onclick = btn;

<p>
  Option 1:
  <button id="first-button" onclick="btn(this)">
    btn(this)
    <span id="first-button-SPAN" style="border: 1px solid red">This is a span</span>
  </button>
</p>

<p>
  Option 2:
  <button id="second-button" onclick="btn(event)">
    btn(event)
    <span id="second-button-SPAN" style="border: 1px solid red">This is a span</span>
  </button>
</p>

<p>
  Option 3:
  <button id="third-button">
    binding
    <span id="third-button-SPAN" style="border: 1px solid red">This is a span</span>
  </button>
</p>

Answer 2

Предполагается, что параметр event не был установлен (т.е. не определен) при вызове метода btn(...).

Вы должны проверять, что event установлено всякий раз, когда код пытается использовать этоmethod.

Также может быть безопаснее не использовать event в качестве имени параметра в вашей функции - это может вызвать проблемы (т.е. это , очевидно, глобальная переменная в IE ). Попробуйте изменить его на myEvent?

Answer 3

По умолчанию функция принимает значения аргументов как undefined в JavaScript, поэтому я хотел бы, чтобы вы забыли передать событие в функцию-обработчик, то есть btn () .

Лучшим простым примером для понимания этой концепции будет https://www.w3schools.com/jsref/event_target.asp

Так что вместо того, чтобы звонить как onclick=btn() или onclick=btn(this), предпочтите onclick=btn(event), правильныйв противном случае undefined будет принято как значение по умолчанию.

Answer 4

Примечание: когда мы вызываем функцию из HTML, мы получаем кнопку напрямую, т.е. target.

С переплетом получаем event

function btn(event){        
    var theTarget = event.target || event;
    alert(theTarget.tagName);
}

document.querySelector('#boundEvent').onclick = btn;

<!-- In this way we are passing the button directly. -->
<button onclick="btn(this);">Direct call</button>
<!-- When we bind in our code (Best way) we will get an event object. --> 
<button id="boundEvent">Bound Event</button>