F-MIX.COM - это развлекательно-информационный сайт предназначенный для людей с чувством юмора, которые не любят скучать и унывать. На страницах нашего сайта можно найти много интересной и позитивной информации.

Прямое добавление обработчика по селе...

Опубликовано: 22.06.2022 в 15:23  |  Автор: Admin  |  Просмотров: 55  |  Комментарии: 0

Вместо использования id элемента, можно выбирать элементы по произвольному селектору, например по классу. Таким образом можно добавить обработчик сразу большому количеству элементов, а для передачи дополнительных параметров, можно воспользоваться data-атрибутами:

<style>
* {
  font-family: monospace;
}

button {
  width: 225px;
}
</style>
<p>
  <input type="text" class="alpha-input" id="text1" value="abcdefg" />
  <span>Class: alpha-input, type: text</span>
</p>
<p>
  <input type="text" class="alpha-input nummeric-input" id="text2" value="xyz1232" />
  <span>Class: alpha-input nummeric-input, type: text</span>
</p>
<p>
  <input type="number" class="nummeric-input" id="numberInput" value="1232456" />
  <span>Class: nummeric-input, type: number</span>
</p>
<p>
  <input type="date" id="dateInput" value="1991-01-01" />
  <span>Class: &lt;not defined&gt;, type: date</span>
</p>
<p>
  <button class="clear-button" data-clear-selector="input.alpha-input">
    Clear "input.alpha-input"
  </button>
</p>
<p>
  <button class="clear-button" data-clear-selector="input.nummeric-input">
    Clear "input.nummeric-input"
  </button>
</p>
<p>
  <button class="clear-button" data-clear-selector="input[type='date']">
    Clear "input[type='date']"
  </button>
</p>
<p>
  <button class="clear-button" data-clear-selector="input">
    Clear all inputs
  </button>
</p>
<script type="text/javascript">
// Вместо класса можно использовать data-атрибуты: "[data-clear-button]"
document.querySelectorAll(".clear-button")
.forEach(function (elem) {
  elem.onclick = function (e) {
    // Если необходимо предотвратить/отменить событие по умолчанию,
    // то необходимо вызвать метод preventDefault у события
    // https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault
    // e.preventDefault();
    // если необходимо также предотвратить дальнейшее "всплытие" события,
    // то необходимо вызвать метод stopPropagation у события
    // https://developer.mozilla.org/ru/docs/Web/API/Event/stopPropagation
    // e.stopPropagation();
    let selector = this.dataset.clearSelector;
    document.querySelectorAll(selector)
    .forEach(function (item) {
      item.value = "";
    });
  };
});
</script>

Демонстрация
Похожие материалы

Комментарии


Комментарии к этой странице отключены администратором сайта