dialog boxes in javascript events in javascript – what are they – “which events are there?”...

• Dialog boxes in JavaScript• Events in JavaScript

– What are they– “Which events are there?”– “How do I register event handlers to an HTML element?”– “Once I have successfully accessed the event, how do I read out

its properties?”

Topic 5_3: Interacting with the user

By the end of this lecture you should :


Dialog boxes:

Three methods used by the window object to interact with the user:

- alert( ) example 1, example 2- prompt( ) example 3- Confirm( ) example 4

Dialog boxes in JavaScriptEvents in JavaScript

What are they“Which events are there?”

“How do I register event handlers to an HTML element?”

“Once I have successfully accessed the event, how do I read out its properties?


Events – building blocks of interactivity:

Object that generates an

event (e.g. button)

Event handlers supported by

the object (e.g. onclick)

Custom event handler function may be assigned

to the evente.g. function

buttonPressed(){//do

something}

When the user does something an event takes place.An event handler waits until the event takes place and then executes the script you have defined – this is the core of interactivity.

http://www.quirksmode.org/js/introevents.html - an excellent resource for understanding events in detail





http://www.quirksmode.org/js/introevents.html

http://www.quirksmode.org/js/introevents.html


Events:“How should I write an event handling script?”

“Which events are there?”

http://www.w3schools.com/jsref/dom_obj_event.asp










Traditionally,

element.onclick = doSomething;

Whenever the user clicks on the HTML element, the function doSomething() is executed.

Note that in the registration of an event handler you do not use parentheses ()






Events:“How should I write an event handling script?”Dialog boxes in JavaScriptEvents in JavaScript




For example, for a click event can write something like this

element.onclick = doSomething; another_element.onclick = doSomething; function doSomething() { this.style.backgroundColor = '#cc0000'; }

this always refers to the “owner” of the function we're executing, or rather, to the object that a function

is a method of.

If we were to executefunction doSomething() {

this.style.color = '#cc0000'; }without other preparation we would get an error. Why?

What else do we need to do to correctly structure code and avoid the error?



A brief note about w3C event handling:

- Key method is the addEventListener()- Takes three arguments

- Event type- Function to be executed - Boolean value (True or false)

To register doSomething() function to the onclick of an element :element.addEventListener('click',doSomething,false)

To removeelement.removeEventListener('click',doSomething,false)







Using anonymous functions for event handling:

For example:

element.addEventListener('click',function () { this.style.backgroundColor = '#cc0000' },false)

What is the boolean value about?






Events:“How should I write an event handling script?”Event order

The boolean value we see in the W3C event listener on the previous slide refers to order of events.

Netscape

Microsoft

W3C







What is the type of the event?

Which key is being pressed?





dialog boxes in javascript events in javascript – what are they – “which events are there?”...

Documents