Event.currentTarget

1. Эволюция и оптимизация кода 🔄

• Постепенное улучшение: даже простые программы постоянно дорабатываются и структурируются.
• Кажущаяся сложность: на ранних этапах улучшения могут восприниматься как избыточное усложнение.
• Формирование привычек: важно с самого начала писать код правильно, даже для простых задач.

function makeOperation(operationCode) {
  var number1 = Number(input1.value)
  var number2 = Number(input2.value)
 
  if (operationCode === "+") {
    var result = number1 + number2
  } else if (operationCode === "-") {
    var result = number1 - number2
  } else if (operationCode === "*") {
    var result = number1 * number2
  } else if (operationCode === "/") {
    var result = number1 / number2
  } else {
    window.alert("operation is unknown")
  }
  window.alert(result)
}

<div class="input-block">
  <label>Number 1</label>
  <input type="number" value="100" id="number1" />
</div>
<div class="input-block">
  <label>Number 2</label>
  <input type="number" value="5" id="number2" />
</div>

2.Унификация обработчиков событий 🎯

• Ключевая цель: замена множества обработчиков одним универсальным.
• Исходная проблема: 4 отдельных обработчика для математических операций.

3. Объект события (Event Object) ℹ️

Важные концепции:

• Автоматическая передача: при вызове функции-обработчика передается объект события.
• Содержание объекта: информация о событии (координаты, элемент, тип события и т.д.).

Event.currentTarget— свойство объекта события в JavaScript, которое соответствует элементу, на котором установлен обработчик события.

Определение элемента-инициатора:

function onOperationButtonClick(eventObject) {
  const clickedElement = eventObject.currentTarget
  const operation = clickedElement.innerHTML
  makeOperation(operation)
}

4. Методы отладки: debugger🐞

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