SlideShare a Scribd company logo
1 of 19
Download to read offline
JavaScript: 
Events and Events Handling 
Yuriy Bezgachnyuk 
August, 2014
Special Thanks 
to John Resig
Agenda 
▪Events 
– What is event 
– Phases of event 
– How to handle events 
– Event Object 
– Keyboard and mouse events 
▪Exception handling
Events 
▪Event – an action that is fired (initiated) 
within a web page. 
▪JavaScript is Single Thread 
▪JavaScript uses asynchronous callback
Phases of Event 
▪Phase #1 – Capturing 
▪Phase #2 – Bubbling
Defining Event Handler 
▪Old way 
window.onload = function() {}; 
▪New way (add event) 
window.addEventListener(”load”,func,false) 
window.attachEvent(”onload”,func); // IE < 9 
▪We can define event handler only for 
objects!!!
The Event Object 
▪Contains contextual information about the 
current event 
▪An object that’s provided, or is available, 
inside of every event handler function 
▪W3C Standard Browser: e 
▪Internet Explorer: window.event
Cancel Bubbling 
▪Since you know how event 
capturing/bubbling works, let’s explore 
how you can take control it. 
▪W3C 
– e.stopPropagation() 
▪IE 
– window.event.cancelBubble 
▪Live Example (Thanks for J. Resig )
Cancel Bubbling (Scheme)
Cancel Bubbling (Code + Live) 
function stopBuuble(e) { 
if (e && e.stopPropagation) { 
e.stopPropagation(); 
} 
else { 
window.event.cancelBubble = true; 
} 
} var all = document.getElementsByTagName("*"); 
for (var i = 0;i < all.length;i++) { 
all[i].onmouseover = function(e) { 
this.style.border = "1px solid red"; 
stopBuuble(e); 
}; 
all[i].onmouseout = function(e) { 
this.style.border = "0px"; 
stopBuuble(e); 
}; 
}
Overriding Browser Default Event 
▪For most events that take place, the 
browser has some default action that will 
always occur. 
– For example, clicking an <a> element will take 
you to its associated web page; this is a default 
action in the browser. This action will always 
occur after both the capturing and the 
bubbling event phases
Overriding {code: true, live:true} 
function stopDefault(e) { 
if (e && e.preventDefault) { 
e.preventDefault(); 
} 
else { 
window.event.returnValue = false; 
} 
} var iframe = document.getElementById("iframe"); 
var a = document.getElementsByTagName("a"); 
for (var i = 0;i < a.length;i++) { 
a[i].onclick = function(e) { 
iframe.src = this.href; 
return stopDefault(e); 
}; 
}
Keyboard and Mouse Events 
▪Mouse Events 
– onMouseDown 
– onMouseMove 
– onMouseOut 
– onMouseOver 
– onMouseUp 
– onClick 
– onDblClick 
– onDragDrop 
▪Keyboard Events 
– onKeyDown 
– onKeyPress 
– onKeyUp
Practice: Handling Mouse events 
▪Task: <div> container must change 
bg-color after some mouse event 
– hover => yellow; 
– click => red; 
– dblclick =>blue; 
– out =>white;
Code 
<body> 
<div id="container"> 
</div> 
<script type="text/javascript"> 
var div_c = document.getElementById("container"); 
div_c.addEventListener("mouseover", a, false); 
div_c.addEventListener("mouseout", b, false); 
div_c.addEventListener("click", c, false); 
div_c.addEventListener("dblclick", d, false); 
</script> 
</body> 
... 
function a() 
{ 
div_c.style.backgroundColor = "yellow"; 
}
Keyboard Events Handling 
▪Let’s investigate little part of code 
<script type="text/javascript"> 
window.addEventListener("keydown", handleEvent, false); 
window.addEventListener("keypress", handleEvent, false); 
window.addEventListener("keyup", handleEvent, false); 
</script> 
<script type="text/javascript"> 
function handleEvent(e) { 
var e = e || window.event; 
console.log(e); 
} 
</script>
And so what we have…? 
▪After investigation previous slide we can 
see next features of KB events: 
– keydown  keypress  keyup (sequence of 
KB events!!!) 
– Some KB events have value (not 0) of property 
charCode (keypress event only). 
– keydown and keyup events generate scan-code 
only (keyCode property) which always 
similar and don’t depends on KB layout!!!
References and sources 
1. John Resig Pro JavaScript Techniques 
2. David Flenagan JavaScript 
3. Christian Wenz JavaScript Phrasebook 
4. https://developer.mozilla.org/
Questions?

More Related Content

What's hot

JavaScript: Variables and Functions
JavaScript: Variables and FunctionsJavaScript: Variables and Functions
JavaScript: Variables and FunctionsJussi Pohjolainen
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An IntroductionManvendra Singh
 
ES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern JavascriptES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern JavascriptWojciech Dzikowski
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScriptT11 Sessions
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced JavascriptAdieu
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelchomas kandar
 
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
 JavaScript - Chapter 9 - TypeConversion and Regular Expressions  JavaScript - Chapter 9 - TypeConversion and Regular Expressions
JavaScript - Chapter 9 - TypeConversion and Regular Expressions WebStackAcademy
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Aaron Gustafson
 
What is component in reactjs
What is component in reactjsWhat is component in reactjs
What is component in reactjsmanojbkalla
 
javascript objects
javascript objectsjavascript objects
javascript objectsVijay Kalyan
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object ModelWebStackAcademy
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 

What's hot (20)

JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
JavaScript: Variables and Functions
JavaScript: Variables and FunctionsJavaScript: Variables and Functions
JavaScript: Variables and Functions
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Javascript essentials
Javascript essentialsJavascript essentials
Javascript essentials
 
ES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern JavascriptES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern Javascript
 
Javascript functions
Javascript functionsJavascript functions
Javascript functions
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
 JavaScript - Chapter 9 - TypeConversion and Regular Expressions  JavaScript - Chapter 9 - TypeConversion and Regular Expressions
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
What is component in reactjs
What is component in reactjsWhat is component in reactjs
What is component in reactjs
 
Javascript event handler
Javascript event handlerJavascript event handler
Javascript event handler
 
Javascript
JavascriptJavascript
Javascript
 
Jquery
JqueryJquery
Jquery
 
javascript objects
javascript objectsjavascript objects
javascript objects
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 

Viewers also liked

[ESC] Tài liệu về Tổ chức sự kiện
[ESC] Tài liệu về Tổ chức sự kiện [ESC] Tài liệu về Tổ chức sự kiện
[ESC] Tài liệu về Tổ chức sự kiện ESC Vietnam
 
Tìm đối tác kinh doanh truyền thông sự kiện
Tìm đối tác kinh doanh truyền thông sự kiệnTìm đối tác kinh doanh truyền thông sự kiện
Tìm đối tác kinh doanh truyền thông sự kiệnnexttopEVENT
 
Giới thiệu chung về tổ chức sự kiện VTR
Giới thiệu chung về tổ chức sự kiện VTRGiới thiệu chung về tổ chức sự kiện VTR
Giới thiệu chung về tổ chức sự kiện VTRVĩnh Thịnh Resort
 
Cask offline event #1 slide
Cask offline event #1 slideCask offline event #1 slide
Cask offline event #1 slideAn Nhien
 
Event Management - VNMG
Event Management - VNMGEvent Management - VNMG
Event Management - VNMGVy Lai
 
Bài Giảng Tổ Chức Sự Kiện
Bài Giảng Tổ Chức Sự KiệnBài Giảng Tổ Chức Sự Kiện
Bài Giảng Tổ Chức Sự KiệnHoàng Mai
 
J Street Productions Core Values #CultureCode
J Street Productions Core Values #CultureCodeJ Street Productions Core Values #CultureCode
J Street Productions Core Values #CultureCodeJ Street Productions
 
VIETNAMESE EVENT CHECKLIST & QUOTATION
VIETNAMESE EVENT CHECKLIST & QUOTATION VIETNAMESE EVENT CHECKLIST & QUOTATION
VIETNAMESE EVENT CHECKLIST & QUOTATION Son Huynh
 
Kiến thức cơ bản về tổ chức sự kiện
Kiến thức cơ bản về tổ chức sự kiệnKiến thức cơ bản về tổ chức sự kiện
Kiến thức cơ bản về tổ chức sự kiệnGiang Nguyen
 

Viewers also liked (10)

[ESC] Tài liệu về Tổ chức sự kiện
[ESC] Tài liệu về Tổ chức sự kiện [ESC] Tài liệu về Tổ chức sự kiện
[ESC] Tài liệu về Tổ chức sự kiện
 
Tìm đối tác kinh doanh truyền thông sự kiện
Tìm đối tác kinh doanh truyền thông sự kiệnTìm đối tác kinh doanh truyền thông sự kiện
Tìm đối tác kinh doanh truyền thông sự kiện
 
Giới thiệu chung về tổ chức sự kiện VTR
Giới thiệu chung về tổ chức sự kiện VTRGiới thiệu chung về tổ chức sự kiện VTR
Giới thiệu chung về tổ chức sự kiện VTR
 
Cask offline event #1 slide
Cask offline event #1 slideCask offline event #1 slide
Cask offline event #1 slide
 
Event Management - VNMG
Event Management - VNMGEvent Management - VNMG
Event Management - VNMG
 
Bài Giảng Tổ Chức Sự Kiện
Bài Giảng Tổ Chức Sự KiệnBài Giảng Tổ Chức Sự Kiện
Bài Giảng Tổ Chức Sự Kiện
 
J Street Productions Core Values #CultureCode
J Street Productions Core Values #CultureCodeJ Street Productions Core Values #CultureCode
J Street Productions Core Values #CultureCode
 
VIETNAMESE EVENT CHECKLIST & QUOTATION
VIETNAMESE EVENT CHECKLIST & QUOTATION VIETNAMESE EVENT CHECKLIST & QUOTATION
VIETNAMESE EVENT CHECKLIST & QUOTATION
 
Kiến thức cơ bản về tổ chức sự kiện
Kiến thức cơ bản về tổ chức sự kiệnKiến thức cơ bản về tổ chức sự kiện
Kiến thức cơ bản về tổ chức sự kiện
 
Event management
Event managementEvent management
Event management
 

Similar to JavaScript: Events Handling

The Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event HandlingThe Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event HandlingYorick Phoenix
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloRobert Nyman
 
jQuery 1.7 Events
jQuery 1.7 EventsjQuery 1.7 Events
jQuery 1.7 Eventsdmethvin
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!Wildan Maulana
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileRobert Nyman
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresRobert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoRobert Nyman
 
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07Frédéric Harper
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it meansRobert Nyman
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLgerbille
 
Building a js widget
Building a js widgetBuilding a js widget
Building a js widgetTudor Barbu
 
WebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.jsWebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.jsRobert Nyman
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Librariesjeresig
 

Similar to JavaScript: Events Handling (20)

Client Web
Client WebClient Web
Client Web
 
The Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event HandlingThe Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event Handling
 
Attribute actions
Attribute actionsAttribute actions
Attribute actions
 
Events.pdf
Events.pdfEvents.pdf
Events.pdf
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
 
Javascript Browser Events.pdf
Javascript Browser Events.pdfJavascript Browser Events.pdf
Javascript Browser Events.pdf
 
jQuery 1.7 Events
jQuery 1.7 EventsjQuery 1.7 Events
jQuery 1.7 Events
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
 
Javascript and DOM
Javascript and DOMJavascript and DOM
Javascript and DOM
 
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it means
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGL
 
DOM Events
DOM EventsDOM Events
DOM Events
 
Events
EventsEvents
Events
 
Building a js widget
Building a js widgetBuilding a js widget
Building a js widget
 
WebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.jsWebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.js
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries
 

Recently uploaded

Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxjayshuklatrainer
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxnaveenithkrishnan
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusSkylark Nobin
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 

Recently uploaded (15)

Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptx
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus Bonus
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 

JavaScript: Events Handling

  • 1. JavaScript: Events and Events Handling Yuriy Bezgachnyuk August, 2014
  • 2. Special Thanks to John Resig
  • 3. Agenda ▪Events – What is event – Phases of event – How to handle events – Event Object – Keyboard and mouse events ▪Exception handling
  • 4. Events ▪Event – an action that is fired (initiated) within a web page. ▪JavaScript is Single Thread ▪JavaScript uses asynchronous callback
  • 5. Phases of Event ▪Phase #1 – Capturing ▪Phase #2 – Bubbling
  • 6. Defining Event Handler ▪Old way window.onload = function() {}; ▪New way (add event) window.addEventListener(”load”,func,false) window.attachEvent(”onload”,func); // IE < 9 ▪We can define event handler only for objects!!!
  • 7. The Event Object ▪Contains contextual information about the current event ▪An object that’s provided, or is available, inside of every event handler function ▪W3C Standard Browser: e ▪Internet Explorer: window.event
  • 8. Cancel Bubbling ▪Since you know how event capturing/bubbling works, let’s explore how you can take control it. ▪W3C – e.stopPropagation() ▪IE – window.event.cancelBubble ▪Live Example (Thanks for J. Resig )
  • 10. Cancel Bubbling (Code + Live) function stopBuuble(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } } var all = document.getElementsByTagName("*"); for (var i = 0;i < all.length;i++) { all[i].onmouseover = function(e) { this.style.border = "1px solid red"; stopBuuble(e); }; all[i].onmouseout = function(e) { this.style.border = "0px"; stopBuuble(e); }; }
  • 11. Overriding Browser Default Event ▪For most events that take place, the browser has some default action that will always occur. – For example, clicking an <a> element will take you to its associated web page; this is a default action in the browser. This action will always occur after both the capturing and the bubbling event phases
  • 12. Overriding {code: true, live:true} function stopDefault(e) { if (e && e.preventDefault) { e.preventDefault(); } else { window.event.returnValue = false; } } var iframe = document.getElementById("iframe"); var a = document.getElementsByTagName("a"); for (var i = 0;i < a.length;i++) { a[i].onclick = function(e) { iframe.src = this.href; return stopDefault(e); }; }
  • 13. Keyboard and Mouse Events ▪Mouse Events – onMouseDown – onMouseMove – onMouseOut – onMouseOver – onMouseUp – onClick – onDblClick – onDragDrop ▪Keyboard Events – onKeyDown – onKeyPress – onKeyUp
  • 14. Practice: Handling Mouse events ▪Task: <div> container must change bg-color after some mouse event – hover => yellow; – click => red; – dblclick =>blue; – out =>white;
  • 15. Code <body> <div id="container"> </div> <script type="text/javascript"> var div_c = document.getElementById("container"); div_c.addEventListener("mouseover", a, false); div_c.addEventListener("mouseout", b, false); div_c.addEventListener("click", c, false); div_c.addEventListener("dblclick", d, false); </script> </body> ... function a() { div_c.style.backgroundColor = "yellow"; }
  • 16. Keyboard Events Handling ▪Let’s investigate little part of code <script type="text/javascript"> window.addEventListener("keydown", handleEvent, false); window.addEventListener("keypress", handleEvent, false); window.addEventListener("keyup", handleEvent, false); </script> <script type="text/javascript"> function handleEvent(e) { var e = e || window.event; console.log(e); } </script>
  • 17. And so what we have…? ▪After investigation previous slide we can see next features of KB events: – keydown  keypress  keyup (sequence of KB events!!!) – Some KB events have value (not 0) of property charCode (keypress event only). – keydown and keyup events generate scan-code only (keyCode property) which always similar and don’t depends on KB layout!!!
  • 18. References and sources 1. John Resig Pro JavaScript Techniques 2. David Flenagan JavaScript 3. Christian Wenz JavaScript Phrasebook 4. https://developer.mozilla.org/