Порой возникает необходимость выполнить одно и тоже действие по разным событиям. Например, нужно отследить изменения ввода текста в инпут и соответственно обновить другое поле.
Разумеется, надо поставить вызов функции слежения в событие onchange(). Единственная загвоздка в том, что оно вызывается только при потере объектом фокуса, а мне нужна интерактивность. ОК, добавляем тот же вызов в событие onkeyup(), которые будет выстреливать после отпускания любой клавиши. Вызов onchange() оставляем на месте - вдруг пользователь мышкой текст вставит, а к клавиатуре не притронется.
Вопрос в том, как избежать одинаковых вызовов сразу в обоих событиях:
<input type=”text” name=”link_user” onchange=”function_call()” onkeyup=”function_call()”/>
Зачем избегать повторов - код, написанный в одном месте, проще поддерживать, поэтому лично я стараюсь не дублировать куски кода. В итоге я нарисовал такой вариант, который отлично работает и делает код красивее и чище:
<input type=”text” name=”link_user” onchange=”function_call()” onkeyup=”this.onchange()“/>
UPDATE: в некоторых случаях вызов происходит два раза подряд, что не совсем идеально. Но меня устраивает - чем чаще обновляется интерфейс, тем меньше вероятность, что юзер увидит неправильные данные.
Озадачило меня вдруг, зачем хтмл-тэгу SCRIPT нужен атрибут DEFER ?
Первый же хит в гугле выдал такую инфу:
defer: Indicates that the script is not going to generate any document content. The browser can continue parsing and drawing the page.
Получается, что указанием этого атрибута можно немного ускорить показ страницы, если указать его для всех имеющихся JavaScript-библиотек.