Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.09.2016, 08:44
Новичок на форуме
Отправить личное сообщение для himukami Посмотреть профиль Найти все сообщения от himukami
 
Регистрация: 08.09.2016
Сообщений: 3

Правильно вешаем обработчик события
Приветствую!

Возник такой вопрос для знающих.

Предположим есть класс .only-one, и с помощью js устанавливается ограничение что в данное поле можно вводить только цифру 1

$('.only-one').on('keydown', function(key){
	return ((key.keyCode == 49);
});


Предположим, что поле с данным классом было добавлено в DOM поле AJAX запроса, соответственно на него не расспространится событие keydown и его (это событие) нужно указывать для вновь добавленного поля.

Есть два варианта:
1. Сделать это после успешного выполнения AJAX, т.е. в success callback повторить вызов функции
2. Изначально прописать событие немного по другому:

$('body').on('keydown', '.only-one', function(key){
	return ((key.keyCode == 49);
});


И тогда событие keydown будет "вешаться" автоматически на все поля с классом .only-one

Но вопрос как правильно поступить? Я не очень понимаю как работает событийная модель при втором способе записи. Подскажите плиз
Ответить с цитированием
  #2 (permalink)  
Старый 08.09.2016, 08:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

himukami,
правильнее 1, проще 2.
дока по 2.
https://learn.javascript.ru/event-delegation
Ответить с цитированием
  #3 (permalink)  
Старый 08.09.2016, 09:00
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,671

himukami, вообще то правильно вешать на ближайшего статичного родителя, а не body и тому подобное...
Ответить с цитированием
  #4 (permalink)  
Старый 08.09.2016, 09:28
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от himukami
будет "вешаться"
Интересно а как жикверь узнает в своем .on() что хтмл обновился? Ихний аякс поджигает какое-то кастомное событие?
Ответить с цитированием
  #5 (permalink)  
Старый 08.09.2016, 09:33
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

А, понял, там же $('body').on()

Сообщение от himukami
Я не очень понимаю как работает событийная модель при втором способе записи.
Ну то есть жикверь на туловище вешает листенера калбек которого проверяет элемент класса .only-one на событие keydown и если все чики-пуки, то запускается уже твой калбек.

Ты не понимаешь из-за жиквери, я тож не сразу понял. Напиши сам микро-роутер и все будет ясно как пень.
Ответить с цитированием
  #6 (permalink)  
Старый 08.09.2016, 09:35
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Rise, это жиквери-стайл, они не парятся такими деталями, масштабно мыслят, лал.
Ответить с цитированием
  #7 (permalink)  
Старый 08.09.2016, 10:19
Новичок на форуме
Отправить личное сообщение для himukami Посмотреть профиль Найти все сообщения от himukami
 
Регистрация: 08.09.2016
Сообщений: 3

Сообщение от рони Посмотреть сообщение
himukami,
дока по 2.
https://learn.javascript.ru/event-delegation
Спасибо за ссыль. Немного пересмотрел вешанье событий на однотипные элементы.

Сообщение от Rise Посмотреть сообщение
himukami, вообще то правильно вешать на ближайшего статичного родителя, а не body и тому подобное...
Да, я согласен. Если скажем речь идет о таблице, в которой некое действие идет со строкой, то конечно вашаем на table.
В моем примере просто поле с классом .only-one может быть где угодно, хотя скорее можно было повешать на form, все равно поле в форме (скорее всего )

warren buffet

Спасибо за пояснения
Ответить с цитированием
  #8 (permalink)  
Старый 11.09.2016, 06:56
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

himukami, ну так выкинь свой классовый мир на помойку истории и начни мыслить индустриально. Проверка полей - это валидация и зависит только от свойств поля. А какие у твоего поля свойства? Правильно - никакие. Свойства поля болтаются в натравленном на ЭТО поле скрипте. Натравливание скрипта на поле и создает синергию твоего говнокода.

А в промышленности делается наоборот. Скрипт одинаковый для всех полей, а поля имеют свойства.
Ответить с цитированием
  #9 (permalink)  
Старый 11.09.2016, 07:02
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от himukami
и с помощью js устанавливается ограничение что в данное поле можно вводить только цифру 1
И ты думаешь: Вот как классно я придумал - теперь достаточно навесить этот скрипт на любое поле и мои дети не будут голодать. И начинаешь навешивать лапшу сам себе на уши.

Сделай наоборот

<input type="number" max="1">

И тогда один и тот же скрипт проверит правильность любого поля просто сравнивая по правилу приделанному к самому полю.

Это частный случай, случаи более общего порядка реализуются через атрибут pattern
Ответить с цитированием
  #10 (permalink)  
Старый 17.09.2016, 20:38
Новичок на форуме
Отправить личное сообщение для himukami Посмотреть профиль Найти все сообщения от himukami
 
Регистрация: 08.09.2016
Сообщений: 3

Сообщение от warren buffet Посмотреть сообщение
Это частный случай, случаи более общего порядка реализуются через атрибут pattern
Вот проблема паттерна в том, что я не могу ограничить непосредственно ввод символов. Да хорошо, он не дает отправить форму, но дает ввести любые значения. Как добавить "отбрасывание" запрещенных символов? Все равно js кидаем ведь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возможно ли поставить обработчик события "click" на элемент option? Dimaz jQuery 5 05.05.2013 13:39
Дебаг js, или как найти обработчик события для тега jimm88 Events/DOM/Window 1 18.04.2012 15:11
Как "обмануть" обработчик события? itPiligrim Events/DOM/Window 0 13.05.2010 22:55
как узнать имеется ли обработчик события HelpeR Events/DOM/Window 9 17.02.2010 18:20
Обработчик события: как делает jquery? Shasoft jQuery 35 22.04.2009 09:41