CSCI 111 lecture 5
Uploaded by
cheezemuffinCSCI 111 lecture 5
Uploaded by
cheezemuffinCSCI 111: Web Programming and Problem
Solving
Lecture 10: JavaScript Events
Content
•Introduction
•Inline Events
•Event Listeners
•Event Object
Introduction
When browsing a website, the user can interact with the website by:
● Selecting, clicking, hovering over the elements on the page;
● Filling the forms and pressing the keys;
● Resizing or closing the browser window;
● Playing or pausing the video or audio track, and so on …
All of these actions are called events and can be handled by the website
Inline events
Each time a user interacts with the web page, the browser triggers one of
the predefined events such as:
● Mouse events
● Keyboard events
● Form events
● Window events
To handle the event, we can directly write event handler in the HTML
element’s opening tag
Inline events
Each type of events has a predefined name to handle that event. For
example for the mouse events:
● mouseover
● mouseenter
● mouseout
● etc.
<p id=" text1"
onmouseenter="style='background-color: yellow'"
onmouseout="style='background-color: white’"> Example: 1.html, slide5.html
this
this
keyword can be used to access the element where the event has been
fired.
<h2 id="title" onclick="this.style.color='red'">Inline events</h2>
<p id="text2" onclick="changeFont(this)">
Examples: 1.html, 2.html, slide6.html
Event listeners
Inline event handling has some drawbacks:
● Difficult to manage the code (debugging, flexibility)
● Cannot have different handler of the same event
● Mixes HTML and JavaScript in one document
To overcome these problems, we can use event listeners, which are
more flexible and interactive.
Event listeners. Syntax.
element.addEventListener(event, function, useCapture);
let h = document.getElementById("title")
h.addEventListener(
"click", Event type
function(event) Event handler, Note the event argument of the function – event object
{
this.style.color="red";
});
The removeEventListener() method removes event handlers that have
been attached with the addEventListener()
Example: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_addeventlistener_remove and in 3.html
Event object
In some cases it is important not only know what type of event
happened, but also know the context of the event such as:
● what combination of the keys was pressed?
● what are the coordinates of the mouse when clicked?
● when the event happened?
These context information is called event object and can be accessed in
the event listeners.
Style manipulation
The event object can be used to provide better user experience, add some features to
the page, or something else.
h.addEventListener(
"click",
function (event)
{
console.log(event.clientX, event.clientY)
}
); from Example: 3.html (third h1)
Useful links
● https://www.w3schools.com/js/js_events.asp
● https://www.w3schools.com/jsref/dom_obj_event.asp
● https://www.w3schools.com/js/js_htmldom_events.asp
● https://www.w3schools.com/js/js_htmldom_eventlistener.asp
● https://www.w3schools.com/js/js_events_examples.asp
● https://www.w3schools.com/js/js_this.asp
Summary
● JavaScript can be used to handle events caused by user interaction
with the web page: mouse, keyboard, browser, form, window events
● There are two ways to handle the events on the webpage:
○ Inline events
○ Event listeners
● this keyword can be used to access the element where event
happened
● To get more information about the event, we can use event object
provided by the event listeners
