События всплывают вверх по дереву DOM, поэтому, если у вас есть обработчики для элемента и его родителя, сначала будет вызван обработчик дочернего элемента.
Если вы регистрируете более одного обработчика для события в одном элементе DOM (например, более одного обработчика «щелчка» для одной кнопки), то обработчики вызываются в том порядке, в котором они были присоединены к элементу.
Ваши обработчики могут сделать несколько вещей, чтобы изменить то, что происходит после того, как они сделаны:
- С переданным параметром события, вызовите
event.preventDefault(), чтобы предотвратить любое "родное" действие
- вызов
event.stopPropagation(), чтобы предотвратить всплывание события в DOM-дереве
- возвращает false из обработчика, чтобы остановить распространение и , предотвратить по умолчанию
Обратите внимание, что для некоторых элементов ввода (флажки, переключатели) обработка выглядит немного странно. Когда ваш обработчик вызывается, браузер уже установит флажок «флажок» в значение, противоположное его прежнему значению. То есть, если у вас есть флажок, который не отмечен, то обработчик «click» заметит, что атрибут «checked» будет установлен в «true» при его вызове (после того, как пользователь щелкнет). Однако, если обработчик возвращает false, значение флажка на самом деле НЕ будет изменено щелчком, и оно останется не отмеченным. Таким образом, браузер выполняет половину «родного» действия (переключение атрибута элемента «проверено») перед вызовом обработчика, но затем только действительно обновляет элемент, если обработчик не возвращает ложь (или не вызывает «protectDefault ()» для объекта события).