Почему console.info не запускается при возникновении события размытия?

 
function  fix(event){
    console.info("hello");        
} 
document.addEventListener("blur",fix,false);

<table>
	<tr>
        <td>class</td>
        <td><input type = "text" class = "data"></td>
	</tr>
	<tr>
        <td>name</td>
        <td><input type = "text" class = "data"></td>
	</tr>
</table>

So simple the js function.
I want console.info execute when blur event occur,no matter the mouse's focus go out off which input,hello show on console.
What's wrong with my fix function?

javascript dom-events blur

09.10.2018 06:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

272

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

blur не всплывает, поэтому его не будет видно, если вы используете такое делегирование событий - вы увидите событие blur, только если его прослушиватель прикреплен непосредственно к рассматриваемому элементу. Если вы хотите использовать делегирование событий, вместо этого прослушайте событие focusout:

function fix(event) {
  console.info("hello");
}
document.addEventListener("focusout", fix, false);

<table>
  <tr>
    <td>class</td>
    <input type = "text" class = "data"></td>
  </tr>
  <tr>
    <td>name</td>
    <td><input type = "text" class = "data"></td>
  </tr>
</table>

Другая возможность - вместо этого прослушивать событие blur на этапе захвата:

function fix(event) {
  console.info("hello");
}
document.addEventListener("blur", fix, true);
//                                     ^^^^

<table>
  <tr>
    <td>class</td>
    <input type = "text" class = "data"></td>
  </tr>
  <tr>
    <td>name</td>
    <td><input type = "text" class = "data"></td>
  </tr>
</table>

09.10.2018 06:41

Передайте true в качестве аргумента useCapture. Как отмечено в Документы MDN для делегирования событий, также может потребоваться использование отключения фокуса.

function fix(event) {
  console.info("hello");
}
document.addEventListener("blur", fix, true);

<table>
  <tr>
    <td>class</td>
    <td><input type = "text" class = "data"></td>
  </tr>
  <tr>
    <td>name</td>
    <td><input type = "text" class = "data"></td>
  </tr>
</table>

Как указано в Документы MDN для общей информации о событиях, разные браузеры различаются по способу прослушивания события:

Note: The value of Document.activeElement varies across browsers while this event is being handled (bug 452307): IE10 sets it to the element that the focus will move to, while Firefox and Chrome often set it to the body of the document.

09.10.2018 06:52

Другие вопросы по теме

Ag Grid - CellEditor FocusOut

Компонент React высшего порядка для отслеживания кликов

Как создать несколько элементов с помощью DOM в ванильном javascript?

Как решить не удалось удалить EventListener?

После отмены или сохранения диалогового окна печати текущее окно зависало

Параметр функции JavaScript - вопрос для начинающих

Функция обратного вызова прослушивателя событий не вызывается

Какая лучшая практика в Angular для подписки на события, поступающие из iframe?

Как я могу сделать строку таблицы доступной для ссылки, но последний столбец будет вести себя иначе?

Заполнение диапазона формы, когда браузер возвращается к форме

Почему console.info не запускается при возникновении события размытия?

Ответы 2

Другие вопросы по теме

Похожие вопросы