Выполнение функции после действий по умолчанию

Байт · Регистрация: 24.12.2010

Студворк — интернет-сервис помощи студентам

Есть элемент ввода type='color'. По щелчку показывает диалог выбора цвета и сам в него окрашивается.

HTML5
1
2
<label><input type='color' id='Fon' value="#b4ffb4" align="right">
Задание Цвета</label>

Но как сделать так, чтобы после выбора цвета выполнялись какие-то действия.

JavaScript
1
2
3
$("#Fon").click(function() {
  alert('Fon'):
)};

Так функция выполняется ДО выбора цвета

@crackos · 16.10.2016, 22:24

может blur вместо click

Байт · 16.10.2016, 23:53 **[ТС]**

Сообщение от crackos

может blur

Но это возникает при потере фокуса. И как тогда? И зачем?

Добавлено через 7 минут
Методом тыка нашел

change()

@mrtoxas · 17.10.2016, 00:08

Так еще можно

JavaScript
1
2
3
$('#Fon').on('input', function() { 
alert('!!!');
});

@Undisputed · 18.10.2016, 22:45

Байт,
$('#selector').change() это устаревшая запись
рекомендуют использовать $('#selector').on('change', function(){...});

Байт · 18.10.2016, 22:52 **[ТС]**

sys_beginner, А какая, собственно, разница? И на чем основана эта рекомендация? И кто именно рекомендует?
Я понимаю, что on - универсальная форма. Также можно писать $('#selector').on('click', function(){...}); и затаскивать под on все остальные события. А смысл? Может быть выполняется чуть-чуть быстрее?

@j2FunOnly · 18.10.2016, 22:57

Сообщение от sys_beginner

$('#selector').change() это устаревшая запись

Не надо вводить в заблуждение

This method is a shortcut for .on( "change", handler ) in the first two variations, and .trigger( "change" ) in the third.

http://api.jquery.com/change/
Ключевое слово shortcut

@Undisputed · 18.10.2016, 23:12

Сообщение от Байт

А какая, собственно, разница? И на чем основана эта рекомендация? И кто именно рекомендует?

on более гибкий в сравнении с change, так же позволяет вешать события на элементы, которые появились на странице после её полной загрузки. А рекомендуют обычно опытные разрабы. Но с точки зрения самого jquery никаких проблем, можно пользоваться

Сообщение от j2FunOnly

Не надо вводить в заблуждение

Я и не ввожу в заблуждение. change это из серии "old school", но работает, да.

Добавлено через 5 минут
Байт,
Ещё используя on код выглядит одинаковым в отношении работы с событиями. А если использовать то on(), то change(), то click() уже не стандартно получается

Байт · 18.10.2016, 23:19 **[ТС]**

Сообщение от sys_beginner

on более гибкий в сравнении с change

Я бы сказал, более общий. Позволяет вешать не только change, но и множество других. Однако change и on('change', как я понимаю, совершенно эквивалентны, не считая того, что в последнем на 5 букв больше.

Добавлено через 2 минуты

Сообщение от sys_beginner

код выглядит одинаковым

Дык, ну это уже чисто вкусовое различие. А о вкусах...
Лично мне нравится, когда код выглядит поразнообразнее. Быстрее схватываешь суть. И меньше хочется спать...

@Undisputed · 18.10.2016, 23:31

Байт,
По конечному результату да, это одно и то же.

Сообщение от Байт

Лично мне нравится, когда код выглядит поразнообразнее. Быстрее схватываешь суть. И меньше хочется спать...

))) Ну изначально всегда так. Лично сам в последнее время забыл когда встречал код .change() вместо on не считая этой темы))

@j2FunOnly · 19.10.2016, 08:15

Сообщение от sys_beginner

Я и не ввожу в заблуждение. change это из серии "old school", но работает, да.

Значит у нас разные представления о назначении определения "устаревший". Для меня - устаревший == deprecated

Новые блоги и статьи Все статьи Все блоги /
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .

@crackos 46 / 38 / 26 Регистрация: 11.08.2016 Сообщений: 139
	16.10.2016, 22:24
	может blur вместо click 0

@Undisputed 901 / 478 / 93 Регистрация: 10.06.2014 Сообщений: 2,700
	18.10.2016, 22:45
	Байт, $('#selector').change() это устаревшая запись рекомендуют использовать $('#selector').on('change', function(){...}); 0

Байт Диссидент 27714 / 17332 / 3810 Регистрация: 24.12.2010 Сообщений: 38,978
	18.10.2016, 22:52 [ТС]
	sys_beginner, А какая, собственно, разница? И на чем основана эта рекомендация? И кто именно рекомендует? Я понимаю, что on - универсальная форма. Также можно писать $('#selector').on('click', function(){...}); и затаскивать под on все остальные события. А смысл? Может быть выполняется чуть-чуть быстрее? 0