🗊Презентация Программирование JavaScript на базе библиотеки JQuery

Программирование JavaScript на базе библиотеки JQuery События

Объект Event содержит информацию о произошедшем событии его необходимо явно передать в обработчик события

Свойства Event

Cвойства coordX .b-pad__coord_x coordY .b-pad__coord_y target .b-pad__coord_target coordXrel .b-pad__coord_x-relative coordYrel .b-pad__coord_y-relative keyinfo .b-pad__coord_keyinfo text .b-pad__text

Методы showCoords clickPad clickX showKeyinfo

События мыши mousedown Привязывает или вызывает функцию, код которой будет выполнен после нажатия клавиши мыши на выбранном элементе. mouseenter Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши. mouseleave Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента. mousemove Привязывает или вызывает функцию, код которой будет выполнен при передвижении указателя мыши в границах выбранного элемента. mouseout Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента. mouseover Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши. mouseup Привязывает или вызывает функцию, код которой будет выполнен, когда нажатая кнопка мыши будет отпущена.

Назначаем методы на события this.pad.mousemove(this.showCoords.bind(this)) this.pad.click(this.clickPad.bind(this)); this.coordX.click(this.clickX.bind(this)); this.text.keydown(this.showKeyinfo.bind(this));

showCoords(event) Записываем координаты в div this.coordX.html(event.pageX); this.coordY.html(event.pageY); Записываем в div имя класса текущего элемента this.target.html($(event.target).attr('class'));

Метод оформления position() Позволяет узнать текущее местоположение первого выбранного элемента относительно границ родительского элемента. возвращает объект содержащий два свойства: top и left. Свойство left содержит координаты смещения выбранного элемента по оси X (по горизонтали), а top координаты смещения по оси Y (по вертикали).

showCoords() this.coordXrel.html(event.pageX -this.pad.position().left); this.coordYrel.html(event.pageY - this.pad.position().top);

clickPad() console.log('Click PAD');

Методы Event

clickX() console.log('Click Coord X'); event.stopPropagation();

Атрибуты событий

showKeyinfo() this.keyinfo.html( `${event.which} ${event.ctrlKey } ${event.altKey} ${event.shiftKey} ` );