Как правильно повесить два или больше обработчиков на элемент?
Ребят, как правильнее два слушателя навесит на элемент ?
У меня при двойном нажатии можно изменить скажем заголовок таска
Хочу чтобы и при кнопке Enter сохранение происходило и при расфокусе blur
text.addEventListener("blur", () => { editingEl.textContent = text.value; currentTitle = text.value; text.remove(); }); text.addEventListener("keypress", (e) => { if (e.key === "Enter") { editingEl.textContent = text.value; currentTitle = text.value; text.remove(); } }); |
text.addEventListener("blur", () => { editingEl.textContent = text.value; currentTitle = text.value; text.remove(); }); text.addEventListener("keypress", (e) => { if (e.key === "Enter") { editingEl.textContent = text.value; currentTitle = text.value; text.remove(); } });
Дополнительно:
const saveTask = () => { editingEl.textContent = text.value; currentTitle = text.value; text.remove(); } text.addEventListener("blur", saveTask); text.addEventListener("keypress", (e) => { if (e.key === "Enter") { saveTask(); } }); |
const saveTask = () => { editingEl.textContent = text.value; currentTitle = text.value; text.remove(); } text.addEventListener("blur", saveTask); text.addEventListener("keypress", (e) => { if (e.key === "Enter") { saveTask(); } });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления двух или более обработчиков событий на элемент веб-страницы, можно воспользоваться методами добавления обработчиков событий в JavaScript. Существует несколько способов сделать это:
1. **addEventListener()**:
```html
document.getElementById('myElement').addEventListener('click', function() { // первый обработчик события }); document.getElementById('myElement').addEventListener('click', function() { // второй обработчик события });
```
2. **setAttribute()**:
```html
document.getElementById('myElement').setAttribute('onclick', 'firstHandler(); secondHandler();');
```
3. **Свойство on-event**:
```html
document.getElementById('myElement').onclick = function() { firstHandler(); secondHandler(); };
```
4. **EventTarget.addEventListener()**:
```html
function handler1() { // первый обработчик события } function handler2() { // второй обработчик события } document.getElementById('myElement').addEventListener('click', handler1); document.getElementById('myElement').addEventListener('click', handler2);
```
5. **jQuery**:
```html
$('#myElement').on('click', function() { // первый обработчик события }); $('#myElement').on('click', function() { // второй обработчик события });
```
Выбор способа зависит от конкретной ситуации и предпочтений разработчика. Каждый из перечисленных методов позволяет добавить несколько обработчиков событий на один элемент.