Не работает event javascript

event.preventDefault не работает

У меня есть этот простой код, ничего особенного.

Всякий раз, когда я нажимаю кнопку «отправить», функция event.preventDefault не работает, и страница загружается.

Есть идеи, почему?

7 ответов

форма имеет событие отправки, а не кнопку. Кроме того, идентификатор должен быть уникальным, поэтому tag#id может быть просто #id .

1. Добавить кавычки вокруг ‘add.php’
2. Измените селектор в первой строке на атрибут id формы, которая содержит input#send .

Преимущество обработки обработчика submit() в форме, а не обработчика click на входе, состоит в том, что некоторые формы могут быть отправлены нажатием клавиши ввода (когда пользователь фокусируется на одном из полей формы). ) . Если у вас нет атрибута id , добавьте его или используйте другой селектор jQuery для нацеливания на тег формы.

Если вы используете protectDefault, я предполагаю, что это означает, что вы НЕ хотите действия отправки по умолчанию. Я бы просто использовал другое событие вместо .submit. Для меня это не действие отправки, которое вы хотите перехватить, а щелчок, который обычно вызывает отправку.

Вам необходимо привязать событие submit формы или событие click кнопки и вызвать event.preventDefault() , если вы хотите остановить отправку формы:

Если оба return false и event.stopPropagation() не работают, попробуйте следующий метод. Использование .on() сделает функцию отправки доступной. Как только вы измените .submit() на .on(«submit»..) , вы можете использовать return false или e.stopPropagation() .

Я полагаю, что событие submit относится к элементу form . Для ввода [type = ‘button’] вы можете использовать событие click.

Попробуйте вместо этого использовать return false

Источник

Почему не срабатывает условие (event.type и event.target)?

Изучаю JS, в данный момент DOM, знания небольшие.
После теории выполняю практические задания.
На двух задачах застряла, не понимаю, как сделать (задания на event.type и event.target).
Заранее благодарна за помощь в решении и объяснение, где я ошиблась.

Задача1
к двум событиям привязан один и тот же обработчик:
text

Допишите код функции func так, чтобы при клике на элемент этот элемент красился в зеленый цвет, а при двойном клике — в красный.

Но при нажатии одним кликом срабатывает сразу второе условие и кнопка становится желтой.
если закомментировать второе условие, тогда первое срабатывает и кнопка становится зеленой.
При этом в консоли при одном клике отображается «click», а при двойном «click», «click», «dblclick».

Задача2
Пусть есть список ul с тегами li:

Привяжите к тегу ul обработчик клика. В этом обработчике проверяйте с помощью свойства tagName, по какому тегу был клик. Если клик был по тегу li — добавьте в конец текста этого тега восклицательный знак. А если клик был по тегу ul — добавьте ему в конец еще один пункт списка.

мое решение:
Тег, на который был сделан клик, определяется верно, и в случае с ul все работает, а вот с li — не работает.
я исходила из того, что элементы li образуются массив и функция, в которой идет присвоение ‘!’ содержимому li, должна выполнятся для li, по которому сделан клик.

Источник

Не работающие события js [дубликат]

Есть список(11 элементов)

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

У каждого абзаца через css прописана прозрачность и абсолютное позиционирование, хочу сделать так чтобы при клике на первый элемент списка, прозрачность у первого абзаца пропадала, он становился видимым, при клике на второй элемент списка тоже самое происходило бы со вторым абзацем. Вот как я пытался решить проблему:

Беру два массива, первый это все элементы списка на странице, второй абзацы. Потом в цикле перебираю каждый элементы и вешаю на него обработчик. Не понимаю, но это не работает. В отладчике четко видно, что при клике на первый элемент, в i подставляется значение 11. Как сделать правильно?

1 ответ 1

Правильно будет не навешивать на каждый элемент списка обработчик, а использовать делегирование событий — это первый момент. Если не знаете что это такое, то вкратце это подход, когда событие вешается не на каждый элемент, а на его «контейнер» и уже в обработчике идет проверка на каком элементе возникло событие и выполнение необходимых действий. Что необходимо знать для решения задачи:
1. элемент на котором произошло событие.
2. его индекс в массиве.
Итак, с первым пунктом все просто, проверим event.target , для второго пункта можно воспользоваться методом forEach .
Напомню, индекс элемента нам необходим для доступа к нужному элементу в массиве с описаниями.
Так же понадобиться функция показывающая необходимый элемент.
Затем собрав все в кучу получиться следующий код:

P.S. Можно воспользоваться и обычным циклом for , но тогда необходимо сохранить текущий i в замыкании.Для этого можно воспользоваться функциональным выражением с немедленно вызываемой функцией в теле цикла. Выглядит это так:

[Дополнение]
Как правильно заметил Grundy бегать в цикле каждый раз по элементам может быть накладно, если допустим у нас их несколько тысяч.
Поэтому непосредственно к разметке в ответе можно применить вместо цикла следующее:
Так как описание элемента списка идет сразу же за самим элементом, можно получить элемент в дереве DOM, стоящий справа от того покоторому кликнули и произвести над ним манипуляции.

Источник

Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:

• click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
• contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
• mouseover / mouseout – когда мышь наводится на / покидает элемент.
• mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
• mousemove – при движении мыши.

События на элементах управления:

• submit – пользователь отправил форму .
• focus – пользователь фокусируется на элементе, например нажимает на .

Клавиатурные события:

• keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:

• DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

CSS events:

• transitionend – когда CSS-анимация завершена.

Существует множество других событий. Мы подробно разберём их в последующих главах.

Обработчики событий

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого.

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on .

Например, чтобы назначить обработчик события click на элементе input , можно использовать атрибут onclick , вот так:

При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick .

Обратите внимание, для содержимого атрибута onclick используются одинарные кавычки, так как сам атрибут находится в двойных. Если мы забудем об этом и поставим двойные кавычки внутри атрибута, вот так: onclick=»alert(«Click!»)» , код не будет работать.

Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.

Следующий пример по клику запускает функцию countRabbits() :

Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick и onCLICK … Но, как правило, атрибуты пишут в нижнем регистре: onclick .

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on .

К примеру, elem.onclick :

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

Этот способ, по сути, аналогичен предыдущему.

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Эти два примера кода работают одинаково:

Так как у элемента DOM может быть только одно свойство с именем onclick , то назначить более одного обработчика так нельзя.

В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:

Кстати, обработчиком можно назначить и уже существующую функцию:

Убрать обработчик можно назначением elem.onclick = null .

Доступ к элементу через this

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.

В коде ниже button выводит своё содержимое, используя this.innerHTML :

Частые ошибки

Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.

Функция должна быть присвоена как sayThanks , а не sayThanks() .

Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined , так как функция ничего не возвращает) будет присвоен onclick . Так что это не будет работать.

…А вот в разметке, в отличие от свойства, скобки нужны:

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: sayThanks() .

Так что разметка генерирует такое свойство:

Используйте именно функции, а не строки.

Назначение обработчика строкой elem.onclick = «alert(1)» также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

Не используйте setAttribute для обработчиков.

Такой вызов работать не будет:

Регистр DOM-свойства имеет значение.

Используйте elem.onclick , а не elem.ONCLICK , потому что DOM-свойства чувствительны к регистру.

addEventListener

Фундаментальный недостаток описанных выше способов назначения обработчика –- невозможность повесить несколько обработчиков на одно событие.

Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.

Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:

Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов addEventListener и removeEventListener . Они свободны от указанного недостатка.

Синтаксис добавления обработчика:

Для удаления обработчика следует использовать removeEventListener :

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Вот так не сработает:

Обработчик не будет удалён, т.к. в removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.

Вот так правильно:

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

Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener . Однако, во избежание путаницы, рекомендуется выбрать один способ.

Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener .

Например, таково событие DOMContentLoaded , которое срабатывает, когда завершена загрузка и построение DOM документа.

Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример ниже демонстрирует получение координат мыши из объекта события:

Некоторые свойства объекта event :

event.type Тип события, в данном случае «click» . event.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this , но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this , то мы можем получить элемент из event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.

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

При назначении обработчика в HTML, тоже можно использовать объект event , вот так:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется «event» , а тело взято из атрибута.

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener . В этом случае, когда происходит событие, вызывается метод объекта handleEvent .

Как видим, если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event) , когда происходит событие.

Мы также можем использовать класс для этого:

Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener . Тогда объект menu будет получать события mousedown и mouseup , но не другие (не назначенные) типы событий.

Метод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий, вот так:

Теперь обработка событий разделена по методам, что упрощает поддержку кода.

Итого

Есть три способа назначения обработчиков событий:

1. Атрибут HTML: onclick=». » .
2. DOM-свойство: elem.onclick = function .
3. Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.

HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.

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

Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, к примеру transitionend и DOMContentLoaded . Также addEventListener поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта handleEvent .

Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло.

Мы изучим больше о событиях и их типах в следующих главах.

Источник