This document discusses how DOM events work under the hood in browsers. It explains that events follow a capture and bubble phase model, where event handlers on parent elements are executed first during capture, then event handlers on the target element, then handlers on parent elements again during bubbling. It provides code for a custom event system that simulates this behavior, handling setting up the event, calculating the parent path, and executing handlers for each phase and the default action. It also covers topics like event data, stopping propagation, and gotchas with cross-browser event handling.
You’ve seen Kris’ open source libraries, but how does he tackle coding out an application? Walk through green fields with a Symfony expert as he takes his latest “next big thing” idea from the first line of code to a functional prototype. Learn design patterns and principles to guide your way in organizing your own code and take home some practical examples to kickstart your next project.
If you have used Facebook's React library, then you are familiar with the concept of application state. React components are, at their core (and as noted in the official documentation), simple state machines. This declarative approach to building a UI may take some adjusting to, but it ultimately simplifies kludgy imperative code into smaller, much more manageable pieces.
This pattern of manipulating state and responding to those changes can be implemented to great effect using the Symfony Event Dispatcher. This talk will step through this state-based approach to building an easily maintained and testable PHP application, tease out a few gotchas, and share real-world applications.
You've seen Kris' open source libraries, but how does he tackle coding out an application? Walk through green fields with a Symfony expert as he takes his latest “next big thing” idea from the first line of code to a functional prototype. Learn design patterns and principles to guide your way in organizing your own code and take home some practical examples to kickstart your next project.
Part of the JavaScript training series offered by Bitovi. Full course schedule is available here: http://blog.bitovi.com/free-weekly-online-javascript-training/
You’ve seen Kris’ open source libraries, but how does he tackle coding out an application? Walk through green fields with a Symfony expert as he takes his latest “next big thing” idea from the first line of code to a functional prototype. Learn design patterns and principles to guide your way in organizing your own code and take home some practical examples to kickstart your next project.
If you have used Facebook's React library, then you are familiar with the concept of application state. React components are, at their core (and as noted in the official documentation), simple state machines. This declarative approach to building a UI may take some adjusting to, but it ultimately simplifies kludgy imperative code into smaller, much more manageable pieces.
This pattern of manipulating state and responding to those changes can be implemented to great effect using the Symfony Event Dispatcher. This talk will step through this state-based approach to building an easily maintained and testable PHP application, tease out a few gotchas, and share real-world applications.
You've seen Kris' open source libraries, but how does he tackle coding out an application? Walk through green fields with a Symfony expert as he takes his latest “next big thing” idea from the first line of code to a functional prototype. Learn design patterns and principles to guide your way in organizing your own code and take home some practical examples to kickstart your next project.
Part of the JavaScript training series offered by Bitovi. Full course schedule is available here: http://blog.bitovi.com/free-weekly-online-javascript-training/
You’ve seen Kris’ open source libraries, but how does he tackle coding out an application? Walk through green fields with a Symfony expert as he takes his latest “next big thing” idea from the first line of code to a functional prototype. Learn design patterns and principles to guide your way in organizing your own code and take home some practical examples to kickstart your next project.
The security component tackles the complex problems of authentication and authorization by spreading concerns across a number of single responsibility objects. This is a flexible design, but difficult for beginners to navigate. This presentation will bring the security component to life for us all to understand! Join us to see some of your favorite members of the Symfony community perform the security component in a series of scenes, interspliced with some technical descriptions of what's going on.
Drupal 8 leverages Assetic for managing Javascript and CSS assets. This library abstracts the headaches of integrating with the burgeoning universe of asset pre-processors and optimization tools available to the modern developer.
The lead developer of Assetic will give a tour of the library and discuss the current state of the project, its strengths, and its weaknesses, and also touch on the future: Assetic 2.0.
When you move beyond adding simple enhancements to your website with jQuery and start building full-blown client-side applications, how do you organize your code? At this month's Triangle JS Meetup, we'll take a look at patterns for application development using jQuery that promote the principles of tight encapsulation and loose coupling, including classes, the publish/subscribe paradigm, and dependency management and build systems.
The magic of jQuery's CSS-based selection makes it easy to think about our code in terms of the DOM, and sometimes that approach is exactly right. Other times, though, what we're trying to accomplish is only tangentially related to our nodes, and opting for an approach where we think in terms of functionality -- not how that functionality is manifested on our page -- can pay big dividends in terms of flexibility. In this talk, we'll look at a small sample application where the DOM takes a back seat to functionality-focused modules, and see how the approach can change the way we write and organize our code.
An introduction to jQuery. How to access elements, what you can then do with them, how to create elements, a bit of AJAX and some JSON. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.
You’ve seen Kris’ open source libraries, but how does he tackle coding out an application? Walk through green fields with a Symfony expert as he takes his latest “next big thing” idea from the first line of code to a functional prototype. Learn design patterns and principles to guide your way in organizing your own code and take home some practical examples to kickstart your next project.
The security component tackles the complex problems of authentication and authorization by spreading concerns across a number of single responsibility objects. This is a flexible design, but difficult for beginners to navigate. This presentation will bring the security component to life for us all to understand! Join us to see some of your favorite members of the Symfony community perform the security component in a series of scenes, interspliced with some technical descriptions of what's going on.
Drupal 8 leverages Assetic for managing Javascript and CSS assets. This library abstracts the headaches of integrating with the burgeoning universe of asset pre-processors and optimization tools available to the modern developer.
The lead developer of Assetic will give a tour of the library and discuss the current state of the project, its strengths, and its weaknesses, and also touch on the future: Assetic 2.0.
When you move beyond adding simple enhancements to your website with jQuery and start building full-blown client-side applications, how do you organize your code? At this month's Triangle JS Meetup, we'll take a look at patterns for application development using jQuery that promote the principles of tight encapsulation and loose coupling, including classes, the publish/subscribe paradigm, and dependency management and build systems.
The magic of jQuery's CSS-based selection makes it easy to think about our code in terms of the DOM, and sometimes that approach is exactly right. Other times, though, what we're trying to accomplish is only tangentially related to our nodes, and opting for an approach where we think in terms of functionality -- not how that functionality is manifested on our page -- can pay big dividends in terms of flexibility. In this talk, we'll look at a small sample application where the DOM takes a back seat to functionality-focused modules, and see how the approach can change the way we write and organize our code.
An introduction to jQuery. How to access elements, what you can then do with them, how to create elements, a bit of AJAX and some JSON. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.
A workshop in JavaScript basics with a slight introduction to ES6.
The workshop will cover the following topics:
1- Why Learn JavaScript?
2- Data Types
3- Functions
4- Object Oriented Programming
5- Document Object Model
6- Interview Questions
7- Hands-on:
a- A Simple Slider
b- A Form Validator
Is your web app drowning in a sea of JavaScript? Has your client-side codebase grown from "a snippet here and there" to "more JavaScript than HTML"? Do you find yourself writing one-off snippets instead of generalized components? You're not the only one. Learn about a handful of strategies you can use to keep your JavaScript codebase lean, modular, and flexible. We'll cover all the major pain points — MVC, templates, persisting state, namespacing, graceful error handling, client/server communication, and separation of concerns. And we'll cover how to do all this incrementally so that you don't have to redo everything from scratch.
11. // Specify an event handler for a given event and phase
HTMLNode.prototype.addEventListener =
function(eventName, handler, phase){
// Make a __handlers object on
// this element if there is none already
if(!this.__handlers){
this.__handlers = {};
}
// If there are no event handler lists for
// this event, add them
if(!this.__handlers[eventName]){
this.__handlers[eventName] =
{capture : [], bubble: []};
}
// Add the new handler function
// to the specified phase list
this.__handlers[eventName]
[phase ? 'capture' : 'bubble'].push(handler);
}
13. 1. EVENT SETUP
var elements = [],
target = ev.target,
isPropagationStopped = false,
isDefaultPrevented = false;
// We are on the Capture Phase to start with
ev.eventPhase = 1;
ev.stopPropagation = function(){
isPropagationStopped = true;
}
ev.preventDefault = function(){
isDefaultPrevented = true;
}
14. 2. CALCULATE PARENT NODE PATH
// Loop up through the DOM and collect all of the
// parent nodes into the 'elements' array
do{
elements.push(target);
}while((target = target.parentNode));
// Reverse the list so it's a bit easier to read
// in the following for-loop
elements.reverse();
15. 3. EXECUTE CAPTURE PHASE HANDLERS
// For all of the elements in the list...
for(var i = 0 ; i < elements.length; i++){
// If stopPropagation() was called, end the loop -
// we're done.
if(isPropagationStopped){
break;
}
var currentElement = elements[i],
// If there are any event handlers set for
// this element, event type and phase,
// set that array to 'handlers'. Otherwise,
// set 'handlers' to an empty array.
handlers = currentElement.__handlers
&& currentElement.__handlers[ev.type]
&& currentElement.__handlers[ev.type].capture
|| [];
ev.currentTarget = currentElement;
// Loop through the handlers we've collected and
// execute them in the context of the current element
for(var h = 0; i < handlers.length; h++){
handlers[h].call(currentElement, ev);
}
}
16. 4. EXECUTE DOM LEVEL 1 EVENT HANDLER
// If propagation was not stopped, execute
// the DOM level 1 event handler
if(!isPropagationStopped){
ev.target["on" + ev.type].call(ev.target, ev);
}
elements.reverse();
ev.eventPhase = 3;
17. 5. EXECUTE BUBBLE PHASE HANDLERS
// Basically, do the same thing as before,
// but with the 'elements' list reversed...
for(var i = 0 ; i < elements.length; i++){
if(isPropagationStopped){
break;
}
// ... Also, we are working with the 'bubble' phase
// this time, not 'capture'
var currentElement = elements[i],
handlers = currentElement.__handlers
&& currentElement.__handlers[ev.type]
&& currentElement.__handlers[ev.type].bubble
|| [];
ev.currentTarget = currentElement;
for(var h = 0 ; i < handlers.length; h++){
handlers[h].call(currentElement,ev);
}
}
18. 6. EXECUTE DEFAULT BROWSER BEHAVIOR
// Default behaviors for HTML elements
if(!isDefaultPrevented){
// anchor tag (a link)
if(ev.type == "click"
&& ev.target.nodeName.toLowerCase() == "a"){
window.location = ev.target.href;
}
// default cases for the rest of the elements go here...
}
19. DEFAULT ACTIONS
EVENT DEFAULT ACTION
SUBMIT SENDS A POST REQUEST WITH FORM DATA
CLICK ON AN ANCHOR, SETS WINDOW.LOCATION TO THE EL’S HREF
MOUSEDOWN SELECTS TEXT
CONTEXTMENU OPENS BROWSER CONTEXT MENU
KEYDOWN/KEYPRESS TEXT IS WRITTEN INTO INPUT OR TAB TO NEXT TABINDEX
20. EVENT DELEGATION
$('#todo').on('click', '.delete', function(){
// delete the todo
});
22. EVENT DATA
bubbles
Can event bubble?
cancelable
Can default action be prevented?
currentTarget
Current element during bubble or capture
eventPhase
Bubble or capture
target
The original event target
timestamp
Time event created
Type
Name of event
23. EVENT DATA
MOUSE EVENTS
altKey/ctrlKey/metaKey/shiftKey
True if key was pressed
button
Which button was pressed?
clientX/clientY
x/y relative to browser window
relatedTarget
Secondary target (for mouseover it’s the element entered)
screenX/screenY
x/y relative to computer screen
24. EVENT DATA
KEY EVENTS
charCode
Character representation of key pressed
keyCode
Numeric key code
26. GOTCHAS
PROBLEM $ SOLUTION
IE (8 and below) is almost but not quite exactly unlike
$.fn.on
everything shown
Order of dispatching events per element isn’t the same
cross browser jQuery normalizes events
To remove an event, need reference to the original function
$.fn.off
Mouseover an internal element causes a mouseout on the
containing element.
mouseenter/mouseleave