BOM DOM Events

Intro

About Us

Filip Svetličić - senior frontend developer, Inchoo
http://inchoo.net/author/filip-svetlicic/

Osijek Software City, http://softwarecity.hr
J. J. Strossmayer University of Osijek – Department of Mathematics, http://www.mathos.unios.hr/

Workshop URL

http://ficosvt.github.io/bom-dom-events/
(source at https://github.com/ficosvt/bom-dom-events/)

Workshop user guide

Google Chrome with built-in dev tools
https://developers.google.com/chrome-developer-tools/

Codecademy, JSFiddle

http://www.codecademy.com/ Learn to code interactively. Register.
http://jsfiddle.net Online code editor and playground. Register.

BOM - Browser object model

All browsers are split into different parts (objects) that can be accessed trough Javascript. These parts are known as the Browser Object Model (BOM)
Main object is Window and it’s at the top of the hierarchy. All global JavaScript objects, methods, and properties automatically become members of the window object.
These allow you do things like, redirecting the user to a different web page, get the size of the browser window, access all the HTML elements on the page and, again, a whole lot more besides.
Example of relations between objects in BOM

window.document

Returns the Document object for the window.
When an HTML document is loaded into a web browser, it becomes a document object.
The document object is the root node of the HTML document and the "owner" of all other nodes:
(element nodes, text nodes, attribute nodes, and comment nodes).
The document object provides properties and methods to access all node objects, from within JavaScript.

window.navigator

The navigator object contains information about the browser, like the userAgent, product etc.

window.location

The location object contains information about the current URL.
The location object is part of the window object and is accessed through the window.location property.

winodw.history

The history object contains the URLs visited by the user (within a browser window).
The history object is part of the window object and is accessed through the window.history property.

window.screen

Object screen contains information about display, including it’s width and height and many other useful informations. Although not used frequently, it’s a good information source for functionalities that could change width or height of the browser window.

window object main methods

window.alert(); window.confirm(); winodw.prompt(); window.open(); window.print(); window.scrollTo();

DOM - Document object model

Html DOM

When a web page is loaded, the browser creates a Document Object Model of the page.


The HTML DOM model is constructed as a tree of Objects:
With the object model, JavaScript gets all the power it needs to create dynamic HTML	
The HTML DOM is a standard object model and programming interface for HTML. 
It defines:

In the DOM, all HTML elements are defined as objects.
Html tags + Text + Comments + .. (NODES)
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Child, parent, sibling, ancestor, descendant.

Document object

The JavaScript Document object is the container for all HTML HEAD and BODY objects associated within the HTML tags of an HTML document. 
The document object provides properties and methods to access all node objects, from within JavaScript.

Element object

In the HTML DOM, the Element object represents an HTML element. Element objects can have child nodes of type element nodes, text nodes, or comment nodes. 
A NodeList object represents a list of nodes, like an HTML element's collection of child nodes.
Elements can also have attributes.

DOM manipulation

Selectors

Oldies

Events

Events are signals generated when specific actions occur.
JavaScript is aware of these signals, and scripts can be built to react to these events.

An event handler is a routine that is used to handle the event, allowing a programmer to write code that will be executed when the event occurs.

DOM Level 0 model

The oldest DOM implementation.
Events are attached to elements and can be added in form of attributes or directly.

DOM Level 2 model

An event listener is a procedure or function in a computer program that waits for an event to occur; that event may be a user clicking or moving the mouse, pressing a key on the keyboard, or an internal timer or interrupt. The listener is in effect a loop that is programmed to react to an input or signal.
Click me

Common events

click
keydown,keyup,keypress
load,unload
mouseover,mouseout
mousemoves
scroll,
submit
touchstart
touchmove
touchend
touchcancel
Click me 2

Cross browser compatibility

Propagation


Capturing vs bubbling

Bubbling is default! Just remember that you're going from inside.
Event.stopPropagation();

Common examples


Which Element has which Event?

RTFM :)

DOM ready

Resources

http://www.w3schools.com/jsref/obj_window.asp
http://www.w3schools.com/jsref/dom_obj_document.asp
http://www.w3schools.com/jsref/dom_obj_all.asp
http://api.jquery.com/category/selectors/
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
http://stackoverflow.com/a/11503576

http://coding.smashingmagazine.com/2012/08/17/javascript-events-responding-user/
http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/
https://developer.mozilla.org/en/docs/Web/API/Event
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
https://www.google.hr/search?q=this+vs+currentTarget

2015 Filip Svetličić, Inchoo