Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
15 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
274.00 kB
Просмотров:
91
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![Программирование JavaScript](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img0.jpg)
Содержание слайда: Программирование JavaScript на базе библиотеки JQuery
События
№2 слайд![Объект Event содержит](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img1.jpg)
Содержание слайда: Объект Event
содержит информацию о произошедшем событии
его необходимо явно передать в обработчик события
№3 слайд![Свойства Event](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img2.jpg)
Содержание слайда: Свойства Event
№4 слайд![Cвойства coordX .b-pad coord](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img3.jpg)
Содержание слайда: 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
№5 слайд![Методы showCoords clickPad](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img4.jpg)
Содержание слайда: Методы
showCoords
clickPad
clickX
showKeyinfo
№6 слайд![События мыши mousedown](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img5.jpg)
Содержание слайда: События мыши
mousedown
Привязывает или вызывает функцию, код которой будет выполнен после нажатия клавиши мыши на выбранном элементе.
mouseenter
Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши.
mouseleave
Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента.
mousemove
Привязывает или вызывает функцию, код которой будет выполнен при передвижении указателя мыши в границах выбранного элемента.
mouseout
Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента.
mouseover
Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши.
mouseup
Привязывает или вызывает функцию, код которой будет выполнен, когда нажатая кнопка мыши будет отпущена.
№7 слайд![Назначаем методы на события](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img6.jpg)
Содержание слайда: Назначаем методы на события
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));
№8 слайд![showCoords event Записываем](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img7.jpg)
Содержание слайда: showCoords(event)
Записываем координаты в div
this.coordX.html(event.pageX);
this.coordY.html(event.pageY);
Записываем в div имя класса
текущего элемента
this.target.html($(event.target).attr('class'));
№9 слайд![Метод оформления position](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img8.jpg)
Содержание слайда: Метод оформления position()
Позволяет узнать текущее местоположение
первого выбранного элемента относительно
границ родительского элемента.
возвращает объект содержащий два свойства:
top и left.
Свойство left содержит координаты смещения
выбранного элемента по оси X (по горизонтали),
а top координаты смещения по оси Y (по
вертикали).
№10 слайд![showCoords](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img9.jpg)
Содержание слайда: showCoords()
this.coordXrel.html(event.pageX -this.pad.position().left);
this.coordYrel.html(event.pageY - this.pad.position().top);
№11 слайд![clickPad console.log Click PAD](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img10.jpg)
Содержание слайда: clickPad()
console.log('Click PAD');
№12 слайд![Методы Event](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img11.jpg)
Содержание слайда: Методы Event
№13 слайд![clickX console.log Click](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img12.jpg)
Содержание слайда: clickX()
console.log('Click Coord X');
event.stopPropagation();
№14 слайд![Атрибуты событий](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img13.jpg)
Содержание слайда: Атрибуты событий
№15 слайд![showKeyinfo this.keyinfo.html](/documents_6/53dcb7e8e94d57e4a6981cc515021455/img14.jpg)
Содержание слайда: showKeyinfo()
this.keyinfo.html(
`${event.which}
${event.ctrlKey }
${event.altKey}
${event.shiftKey} `
);