Презентация Программирование 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} ` );