Прямое добавление обработчика по селе...
Опубликовано: 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: <not defined>, 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>
Категория: JavaScript | Версия для печати |
Похожие материалы
Комментарии
![]() Комментарии к этой странице отключены администратором сайта |
Меню сайта
Поиск

Категория:
Версия для печати
