Browser Event Handling

Event Object

Event object is passed as the (only) argument to the event handler function

Event object: detailed information on the triggered event
- event.target: the target to which the event was originally triggered
- event.type: event type
- …

<script>
    document.body.addEventListener("click", function (event) {
        console.log(event.target.id); 
    });
</script>
<body id="body_id">
    ...
</body>

Event Handler

We can set our own event handler to catch any DOM event

The original event handler is also invoked after our custom event handler

Example

<body>
    <a href="http://google.com" onclick="console.log('Clicked!');">Google</a>
</body>

To prevent the original handler, call event.preventDefault()

If event handler is set using onX="stmt;" inside HTML tag:

stmt; is wrapped into a function the the single input parameter event

Event Bubbling

Most DOM events “bubble up” through the DOM tree

Target’s ancestors get the event all the way through the document (and sometimes even window) object
Exceptions: focus, scroll, …
To stop event propagation, call event.stopPropagation() inside event handler

Example

<section onclick="console.log('section!');">
    <h1 onclick="console.log('h1!');">Please click
        <em onclick="console.log('em!');">here</em>
    </h1>
</section>

Single-Thread Execution

JavaScript code in a browser is executed in a single thread

No two event handlers will ever run at the same time

Document contents are never updated by two threads simultaneously

No worries about locks, deadlock, or critical region

But web browser “stops” responding to user input while script is running

JavaScript Execution Timeline in Browser

document object is created and document.readyState is set to loading
Browser downloads and parses the page. Scripts are downloaded and executed synchronously in the order they appear in the page (if no async)
- async script starts to be downloaded asynchronously in the background and gets executed as soon as they are available
Once the page is completely parsed, document.readyState is set to interactive
Browser fires DOMContentLoaded event and calls document.onload callback
document.readyState is set to complete
Browser waits for events and calls appropriate event handlers

Execution Timeline Example

<html> <head><title>JavaScript Example</title></head> <body>Click on this document!</body> <script> let colors = [ "yellow", "blue", "red" ]; let i=0; function ChangeColor(event) { document.body.style.backgroundColor = colors[i++%3]; } document.body.addEventListener("click", ChangeColor); </script> </html>

Q: What will happen if we move the <script>...</script> before <body>...</body>?

window: Global Object (1)

window object is the “global object” within a browser

All global variables and functions become properties and methods of window
- e.g., document is in fact window.document

window.location: the URL of the current page

By setting this property, we can load a different page

window.history: browsing history

window.history.back(), window.history.forward()

alert("hello, world!"); // returns nothing response = confirm("Click OK to proceed, Cancel to return"); // returns boolean name = prompt("Type your name"); // returns string

Browser Event Handling

Junghoo Cho

cho@cs.ucla.edu

Event Object

Event Handler

Event Bubbling

Single-Thread Execution

JavaScript Execution Timeline in Browser

Execution Timeline Example

Notes on JavaScript Execution

`window`: Global Object (1)

`window`: Global Object (2)

References

Browser Event Handling

Junghoo Cho

cho@cs.ucla.edu

Event Object

Event Handler

Event Bubbling

Single-Thread Execution

JavaScript Execution Timeline in Browser

Execution Timeline Example

Notes on JavaScript Execution

window: Global Object (1)

window: Global Object (2)

References

`window`: Global Object (1)

`window`: Global Object (2)