1. 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 :

2. 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 2example 1example 2 -prompt( ) example 3example 3 -Confirm( ) example 4example 4 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?

3. 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 event e.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.htmlhttp://www.quirksmode.org/js/introevents.html - an excellent resource for understanding events in detail 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?

4. 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_ev ent.asp 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?

5. 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 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?

6. Topic 5_3: Interacting with the user Events: “How should I write an event handling script?” 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? 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. 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 execute function doSomething() { this.style.color = '#cc0000'; } without other preparation we would get an error. Why? If we were to execute function 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?

7. 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 remove element.removeEventListener('click',doSomething,false) 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?

8. 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 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?

9. 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 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?

10. 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 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?