Events DOM Event Model

HTML Events "on" + event name attribute value is javascript javascript runs 1st return false to STOP browser event (if any)

Layered Events click me What happens? Why don't you try it? click me Why doesn't the return false stop it? ONLY stops the from going to href=""

DOM Events DOM API's event model - separate from HTML SAME BASIC EVENT NAMES AND BEHAVIORS no more "on" prefix! many MORE events! create your own events! Programs somewhat like JAVA's SWING API More flexible and powerful (except in IE6)

Event Triggered When clickclicked once (like :active) mouseinThe mouse moves over an element mouseoutThe mouse moves off an element mouseoverlike :hover mousemoverepeated event as fast cpu mouseupbutton up - use this one mousedownbutton down scrollwhen scrollbars move keydownkey pressed down keyupkey was let up - use this one

Event Triggered When blurElement becomes inactive selectA user selects a field in a form focusElement becomes active (anything tab-able) changeThe value of an element changes submitA user submits a form resetA form resets resizewindow resize loadA document or image loads unloadA document unloads abortThe loading of an image is interrupted errorloading a document or image goes bad

ElementEvent click, mouseover, mouseout about, error, load mouseover, mouseout blur, error, focus, load, unload blur, error, focus, load, unload blur, focus submit, reset blur, focus, change, select click click click blur, focus, change blur, focus, change, select blur, focus, change OL D

addEventListener() HTMLElement.addEventListener( "event name without on prefix. ex: click", function object which is.call(this, event), optional: true - capture event early );

HTML is easier. Why use DOM? HTML on"event" requires CHANGES TO HTML Automation, productivity, bandwidth Flexibility getElementsByClassName() code reuse! - programming costs more More features; + invalid HTML events can exist in DOM (some events only exist in DOM)

function hi(){ alert("hello!"); } document.body.addEventListener( 'load', hi ); // after page is loads // an alert window says "hello!"

removeEventListener() dispatchEvent() fake events; trigger made up events requires Event object: e= document.createEvent("name") e.initEvent(...) - setup properties see also...

HTML tags have a hierarchy parent tags can overlap events paragraph is parent child tag Try it. experiment. capture / bubble

body p a a Click! Capture (true) Bubble (false) 's onclick="runs" 's onclick="runs" 's href is followed 's href is followed

function capture(){ alert("captured!"); } function bubble(){ alert("bubbled"); } tagObject= document.getElementById('id'); tagObject.addEventListener( 'click', bubble, false ); tagObject.addEventListener( 'click', capture, true ); // A click on tagObject: // 1 st says "hello!" (capture phase) // 2 nd says "bye" (bubble phase - default) // 3 rd tagObject does whatever it normally does //- likely nothing unless it is,, etc.

Demo

Common Use Bubble only - HTML onEvents are bubble Usually Bubble is all you want MSIE never supported capture Compatibility libraries forced to do same So, addEventListener('event', function); false is redundant, undefined comes out false

Event object Describes details of the event; timestamp, keys click HTML onEvents set var event for you You never work with Event, you use event an instance of Event

tagObject.addEventListener('click', your_f, false) what it does: your_f.call( tagObject, event) function your_f(e){ alert(this); alert(e); } FYI: Function.call(this, parameters); your_f.call( this=object, parameters,... ); event use in DOM

Useful event methods.preventDefault() stops HTML tags from seeing event function your_f(e){ e.preventDefault(); } similar to HTML's.stopPropagation() event stops traveling down/up to other tags

Useful event Properties.target = same as this; the object of the event.keyCode, charCode = character pressed.shiftKey,.ctrlKey,.altKey = true/false if down.button = mouse button # down (only 1 at a time).clientX,.clientY,.screenX,.screenY = mouse.bubbles = event is bubbling up

variable "binding" Problem: event handler function lack parameters onclick="your_f(anything, I, want...)" addEventListener( 'click', your_f) nothing you want can be given to your_f

Solution 1 Javascript can hack any object tagObject.addEventListener('click', your_f); tagObject.myInformation= "hello"; function your_f(e) { alert(this.myInformation); alert(e.target.myInformation); }

Solution: exploit Javascript's memory management function f(){ var x=5; setTimeout( function(){alert(x);},1000); } f(); variables actually DIE when nothing uses them Solution 2: variable "binding"

variable "binding" (see Closure) Variables are references to memory storage memory storage is freed when there are no more references If you ADD references to the storage it will live until all of them are gone javascript event handling HEAVILY uses "binding"

function attach_an_event(){ var myInformation= "hello"; var your_f= function(e){ alert(myInformation); } tagObject.addEventListener('click', your_f); } // myInformation is "bound" to your_f // it lives until your_f dies and that will not die // if you removedEventListener then it would die // if you removed tagObject then it would die

function your_f(your_evt, your_info){ alert(this);alert(your_evt.type);alert(your_info); } function bind( tag, evt, f, info ){ var middleman= function(event){ return f.call(event.target, event, info); }; tag.addEventListener(evt, middleman); } bind(document.body, "click", your_f, "hello");