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 :

Topic 5_3: Interacting with the user

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?

Topic 5_3: Interacting with the user

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

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?

Topic 5_3: Interacting with the user

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

“Which events are there?”

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

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?

Topic 5_3: Interacting with the user

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

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

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 ()

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?

Topic 5_3: Interacting with the user

Events:“How should I write an event handling script?”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?

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?

Topic 5_3: Interacting with the user

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

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)

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?

Topic 5_3: Interacting with the user

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

Using anonymous functions for event handling:

For example:

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

What is the boolean value about?

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?

Topic 5_3: Interacting with the user

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

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?

Topic 5_3: Interacting with the user

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

What is the type of the event?

Which key is being pressed?

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?