Javascript: как заставить фреймворк обрабатывать событие, если он этого не делает?

Например, библиотека chessboard.js в оригинале не обрабатывает событие click (щелчок по полю доски), а хочется.

Или же нам хочется "прицепить" к имеющемуся полю ввода в форме HTML функцию, обрабатывающую событие change, происходящее, когда текст в этом поле изменился.

Во всех случаях подойдёт следующий общий подход:

1. К странице подключена библиотека JQuery, неважно, локально или удалённо.

2. В HTML-коде есть нужные элементы, которым выставлено уникальные и (для простоты) совпадающие между собой атрибуты id и class, допустим, такие:

<div id="board" class="board"></div>

<input id="fieldValue" class="fieldValue" type="text" maxlength="2" size="3">

3. В коде Javascript - неважно, подключённом из отдельного файла или встроенном в тег <script> (но вызванном или располагающемся ниже по тексту, чем определены целевые элементы HTML), добавлены нужные "слушатели" событий, скажем, для наших примеров, такие

var element1 = document.querySelector('.board');
element1.addEventListener ("click", function(e) {
 //здесь пишем наш код, выполняемый по событию click
}, false);

var element2 = document.querySelector('.fieldValue');
element2.addEventListener ("change", function(e) {
 //здесь пишем наш код, выполняемый по событию change
},false);

Можно всё это сделать и без JQuery, но с ним получается короче и понятнее современному кодеру, который без библиотек ничего не может :)

Следует также учесть, что не все браузеры дружат со всеми событиями даже при использовании JQuery, так, если наше поле ввода не находится ни в какой форме и не имеет явно прописанных обработчиков событий в разметке, даже самый новый Internet Explorer по вводу числа и нажатию клавиши Enter в поле никакого change генерировать не будет. Можно обрабатывать IE отдельно, но я сегодня просто написал "Нажмите клавишу Enter (или Tab, если у Вас - Internet Explorer)" :)

01.02.2018, 16:26 [1922 просмотра]