JavaScript Event Handling For Interaction and Casual Games IGME 230 Fall 2016

Events in JavaScript are (typically) handled with callbacks. Mention that there are also many reactive programming libraries for JavaScript, designed to avoid callbacks for DOM manipulation… React.js is currently the most popular. Callback: a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time. var btn = document.querySelector('button'); btn.onclick = function() { console.log( 'button has been pressed.'); };

Callbacks are often passed Event objects. var btn = document.querySelector('button'); btn.onclick = function( event ) { console.log( 'btn.text:', event.target.innerText ); }; The “target” property of the Event object usually refers to the DOM element that the triggered callback was assigned to. Here we use the “innerText” property to read the text inside of a <button> element.

Event Objects: DOMEvent = { target, timestamp, clientX, clientY, offsetX, offsetY, button, shiftKey, metaKey, ctrlKey }; The target property of the Event object usually refers to the DOM element that the triggered callback was assigned to. Timestamp gives a floating-point offset in milliseconds from when the page was loaded. clientX and clientY provide the position in the browser window of the event, measured from the upper-left corner. offsetX and offsetY provide the position of the event relative to the upper-left corner of the target element. shiftKey, metaKey, and ctrlKey denote if their respective modifier keys are being held down when the event occurs.

The window object can also be assigned events. btn = document.createElement( 'button' ); btn.innerText = 'foo foo'; btn.style.position = 'absolute'; document.querySelector('body').appendChild( btn ); window.onmousemove = function( event ) { btn.style.top = event.clientY + 'px'; btn.style.left = event.clientX + 'px'; }; Demo: paste the code above into the developer’s console in any webpage and then move your mouse in around in the browser window. The button will follow your mouse. Note that you need to add ‘px’ to the clientY and clientX positions to make a valid CSS value.

Using ‘on’ to add events (onclick, onmousedown, onmousemove etc Using ‘on’ to add events (onclick, onmousedown, onmousemove etc.) has problems.

Equivalent: // pure JavaScript btn = document.createElement( 'button' ); btn.onclick = function() { console.log('YO') }; btn.innerText = 'YO'; // vs inline HTML <button onclick="console.log('YO');">YO</button> The problem with both of these methods is that we can only have one callback registered (only one function can be assigned to the onclick property). What if we have many different events that we want to dynamically assign?

Enter addEventListener + removeEventListener btn = document.createElement( 'button' ); btn.innerText = 'YO'; function func1() { console.log( 'YO 1' ); }; function func2() { console.log( 'YO 2 ') ; btn.removeEventListener( 'click', func1 ); }; btn.addEventListener( 'click', func1 ); btn.addEventListener( 'click', func2 ); document.querySelector('body').appendChild( btn ); addEventListener lets us add multiple events. Note that we do not prefix the event names with ‘on’ when we pass them to addEventListener. We can also remove events associated with particular functions. In the above code example (copy and paste into the developer’s console to run) func1 is only called once, because when func2 runs it removes the eventListener that calls func1.

Mouse vs. Touch onmousedown vs. ontouchstart onmouseup vs. ontouchend onmousemove vs. ontouchmove onclick… the same for both Point out how annoying it would be to have to write two entirely different sets of event handlers for mouse vs. touch events.

Pointer Events http://caniuse.com/#search=Pointer “Pointer Events” is link to spec, which provides a unified event system based on MouseEvents. Supports mouse, touch, and pen events. Point out with caniuse link that it is not yet supported on mobile devices (argggh!). So we use a polyfill, PEP.js.

PEP.js (PointerEvent Polyfill) demo: PEP.demo.html Describe what a “polyfill” is: a library that implements (typically standardized) features on browsers that do not natively support the feature. PEP.js lets us use pointer events in any browser. Show PEP.demo.html

Game Demo demo: gameDemo.html This demo randomly places circles on the screen. The player must click them before they fade from view; if they succeed they get points, if they fail they lose health. The game ends health <= 0.