Как использовать палитру цветов HTML5 с прослушивателем событий

#javascript #html #jquery

Вопрос:

Я ищу способ использовать списки событий и получать каждое изменение цвета, перемещая мышь по палитре. Это работает только без eventlistener, и я хотел бы знать, почему. В чем моя ошибка…

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

HTML:

 <input type="color" id='picker_1' oninput="getData(this.value)">
 

Язык JavaScript:

 function getData(value){console.log(value);
 

Используя список событий, я получаю только значения, открывая или закрывая средство выбора, но не перемещаясь по палитре.

HTML:

 <input type="color" id='picker_1'>
 

Язык JavaScript:

 let el = document.getElementById('picker_1');
el.addEventListener('oninput', function() {  // I tried also onchange
 console.log(el.value);
});
 

Лучшим решением было бы использовать стандартный набор цветов HTML5 с jQuery…

Рад хоть какой-то помощи. Спасибо

Ответ №1:

Там нет события , так как oninput при использовании addEventListener вы должны удалить on префикс и использовать input вместо него.

 let el = document.getElementById('picker_1');
el.addEventListener('input', function() {  // I tried also onchange
 console.log(el.value);
}); 
 <input type="color" id='picker_1'>