Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript
Events
Ivan Matiishyn
January, 2014
Agenda
▪ Types of Events
▪ Registering Event Handlers
▪ Event Handler Argument
▪ Event Cancellation
▪ Bubbling
▪ Capturing...
Types of Events
▪ onclick
▪ onmousedown, onmouseup,
▪ onmousemove, onmouseover,
onmouseout
<body>, <input>, <textarea>
▪ o...
Types of Events
▪ onfocus, onblur
▪ onload, onunload, onresize
<form>, elements
▪ onreset, onsubmit
▪ onselect, onchange, ...
Registering Event Handlers - Base Model
Setting Event Handler Attributes
▪ Using
▪ Cancel
Registering Event Handlers - Base Model
Setting Event Handler Attributes
▪ this
Registering Event Handlers - Base Model
Setting Event Handler Properties
▪ Using
Registering Event Handlers
W3C DOM - IE
▪ W3C DOM
▪ IE
Registering Event Handlers
Cross Browser Event Handlers
Event Handler Argument
▪ Any source
– type
– targer / srcElement
▪ Mouse
– button
– altKey, ctrlKey, shiftKey
– clientX, c...
Event Cancellation
▪ W3C DOM
▪ IE
▪ Cross Browser
Bubbling
▪ After an event triggers on the deepest
possible element, it then triggers on parents
in nesting order.
Capturing
▪ Captures down - through 1 -> 2 -> 3.
▪ Bubbles up - through 3 -> 2 -> 1.
References and sources
1. javascript.info
2. JavaScript: The Definitive Guide, 6th Edition
3. Everyone’s experience
Questions?
Upcoming SlideShare
Loading in …5
×

[SoftServe IT Academy] - JavaScript Events

464 views

Published on

Presentation for students of SoftServe IT Academy. "JavaScript Events" by Ivan Matiishyn

Published in: Internet
  • your ppt helping for me .sir pls send more ppt on the all events
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

[SoftServe IT Academy] - JavaScript Events

  1. 1. JavaScript Events Ivan Matiishyn January, 2014
  2. 2. Agenda ▪ Types of Events ▪ Registering Event Handlers ▪ Event Handler Argument ▪ Event Cancellation ▪ Bubbling ▪ Capturing ▪ References and sources
  3. 3. Types of Events ▪ onclick ▪ onmousedown, onmouseup, ▪ onmousemove, onmouseover, onmouseout <body>, <input>, <textarea> ▪ onkeydown ▪ onkeypress ▪ onkeyup
  4. 4. Types of Events ▪ onfocus, onblur ▪ onload, onunload, onresize <form>, elements ▪ onreset, onsubmit ▪ onselect, onchange, onscroll ▪ HTML5 Events, Touchscreen
  5. 5. Registering Event Handlers - Base Model Setting Event Handler Attributes ▪ Using ▪ Cancel
  6. 6. Registering Event Handlers - Base Model Setting Event Handler Attributes ▪ this
  7. 7. Registering Event Handlers - Base Model Setting Event Handler Properties ▪ Using
  8. 8. Registering Event Handlers W3C DOM - IE ▪ W3C DOM ▪ IE
  9. 9. Registering Event Handlers Cross Browser Event Handlers
  10. 10. Event Handler Argument ▪ Any source – type – targer / srcElement ▪ Mouse – button – altKey, ctrlKey, shiftKey – clientX, clientY ▪ Keyboard – keyCode
  11. 11. Event Cancellation ▪ W3C DOM ▪ IE ▪ Cross Browser
  12. 12. Bubbling ▪ After an event triggers on the deepest possible element, it then triggers on parents in nesting order.
  13. 13. Capturing ▪ Captures down - through 1 -> 2 -> 3. ▪ Bubbles up - through 3 -> 2 -> 1.
  14. 14. References and sources 1. javascript.info 2. JavaScript: The Definitive Guide, 6th Edition 3. Everyone’s experience
  15. 15. Questions?

×