Cобытия в JavaScript

49
События в JS ВЛАДИМИР ДАШУКЕВИЧ

Transcript of Cобытия в JavaScript

Page 1: Cобытия в JavaScript

События в JSВЛАДИМИР ДАШУКЕВИЧ

Page 2: Cобытия в JavaScript

Событие

Это сообщение, которое

возникает в различных

точках исполняемого

кода при выполнении

определённых условий.

Page 3: Cобытия в JavaScript

Виды событий в JS

Браузерные

(нативные)

Программные

Page 4: Cобытия в JavaScript

Eventloop в

JS

Page 5: Cобытия в JavaScript

Вопрос?

Page 6: Cобытия в JavaScript

Eventloop

Page 7: Cобытия в JavaScript

Нет Deadlock-ов))))

Page 8: Cобытия в JavaScript

Как создать Deadlock в JS?

WebWorkers

localStorage

(window.addEventListener(“storage”,

function(){}, false))

Page 9: Cобытия в JavaScript

Печаль(

Page 10: Cобытия в JavaScript

События

мыши

Page 11: Cобытия в JavaScript

Mouse???

Page 12: Cобытия в JavaScript

Это ж просто)) Как сложить два

числа)

Page 13: Cобытия в JavaScript

JQuery

Page 14: Cобытия в JavaScript

Capturing and bubbling

Page 15: Cобытия в JavaScript

Netscape vs IE

Page 16: Cобытия в JavaScript

Peace)

Page 17: Cобытия в JavaScript

stopPropagation

Page 18: Cобытия в JavaScript

stopImmediatePropagation

Page 19: Cобытия в JavaScript

Но как же его остановить?

Page 20: Cобытия в JavaScript

Все

просто)))

Page 21: Cобытия в JavaScript

Ах если бы все было так просто(

pointer-events: auto | none |

visiblePainted | visibleFill |

visibleStroke | visible | painted |

fill | stroke | all | inherit;

Page 22: Cобытия в JavaScript

60fps scrolling using pointer-events: none

Page 23: Cобытия в JavaScript

setCapture/releaseCapture

Page 24: Cобытия в JavaScript

Создание своего события

мыши

Page 25: Cобытия в JavaScript

Создать свое событие мыши

Page 26: Cобытия в JavaScript

Вопрос?

Page 27: Cобытия в JavaScript

Touch and pointer

Page 28: Cобытия в JavaScript

Touches

Page 29: Cобытия в JavaScript

TouchEvent

touches

targetTouches

changedTouches

Page 30: Cобытия в JavaScript

Touch

Page 31: Cобытия в JavaScript

Отличие

touches

targetTouches

changedTouches

Page 32: Cобытия в JavaScript

Создание)

Page 33: Cобытия в JavaScript

Творчество и воображение

Page 34: Cобытия в JavaScript

touch-action

touch-action: auto | none | [ [ [ pan-x

|| pan-y || pinch-

zoom ] | manipulation ] || double-

tap-zoom ]

Page 35: Cобытия в JavaScript

Но что же делать с 300ms

задержкой

Fastclick.js

Tap.js

Page 36: Cобытия в JavaScript

Gestures

Page 37: Cобытия в JavaScript

Gestures

Page 38: Cобытия в JavaScript

IE10+

Page 39: Cобытия в JavaScript

Android((((

http://hammerjs.github.io

/

Page 40: Cобытия в JavaScript

Pointers

Page 41: Cобытия в JavaScript
Page 42: Cобытия в JavaScript

Pointer

pointerdown

pointermove

pointerup

MSPointerDow

n

MSPointerMov

e

MSPointerUp

IE11 IE10

Page 43: Cобытия в JavaScript

Gotpointercapture and

setPointerCapture

Page 44: Cобытия в JavaScript

Gamepad

gamepadconnected

gamepaddisconnected

Page 45: Cобытия в JavaScript

Mutations

Page 46: Cобытия в JavaScript

Mutaions

DOMSubtreeModified

DOMNodeRemoved

DOMNodeInserted

Page 47: Cобытия в JavaScript

Mutations

Page 48: Cобытия в JavaScript

MutationObserver

Page 49: Cобытия в JavaScript

Questions?