Scribd
Upload
17 views23 pages

DevX JS - W2C5 - Events

Uploaded by

adilet.umarbekov4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views23 pages

DevX JS - W2C5 - Events

Uploaded by

adilet.umarbekov4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Javascript

Events
Review
Review
● DOM: Document Object Model ● DOM (continued)
○ DOM Manipulation ○ DOM Creation (.innerHTML)
○ DOM Selection (getElementById, etc) ○ DOM Creation (.createElement)
○ DOM Editing & HTMLCollections ○ DOM Deletion
(arraylike) ● Why Code? Solving Problems Long-Term
○ DOM Editing & loops (for vs for-of) ● Breaking Down Problems
Events
Events
Events
1. Open any webpage, then open the
console.
2. In the console, type:
a. monitorEvents(window);
b. press enter
3. Move your mouse over the screen.
What do you see?
4. Open any event object. What do you
see?
Event Listeners
Event Listeners
Event Listeners are a fundamental part of front-end programming.

Event listeners can attach to specific elements. Listening for a mouseclick


only on one specific button. When it happens, run the function!

<button id="theButton">Click Me!</button>


<script>
var theButton = document.getElementById("theButton");
theButton.addEventListener("click", function () {
console.log("clicked!");
});
</script>
Event Listeners
Event Listeners are a fundamental part of front-end programming.

Basically your code watches for an event to happen, then runs a function.

Some common events:

● change - the value of the element has changed


● click - user clicked on the element
● mouseover - mouse is now hovering
● mouseout - mouse has stopped hovering
● keydown - user has clicked a key while focused
● onload - the element (page, image) has loaded
Event Listeners
There are a LOT of events. You don’t need to memorize them all.

I think the most useful ones (that you should focus on for now) are:

click change keyup/keydown

Used to monitor for Used to monitor for Used to monitor for


clicks, buttons, etc… value changes in key going down or
inputs, selects, up. Can also detect
VERY common and checkboxes, etc… which key.
useful
Events Listeners
Events Listeners
1. Copy this code. Add the HTML
to the body, JS to a <script>. var clickMe = document.getElementById("clickMe");
var changeMe = document.getElementById("changeMe");
2. Try to click/type, what do you
var typeMe = document.getElementById("typeMe");
see in the console?
3. How does it work?
clickMe.addEventListener("click", function (e) {
console.log("click", e.target.value);
});
<button id="clickMe"> changeMe.addEventListener("change", function (e) {
Click Me! console.log("change", e.target.value);
</button> });
<input type="text" typeMe.addEventListener("keydown", function (e) {
id="changeMe" /> console.log("key", e.target.value);
<input type="text" });
id="typeMe" />
Event Object
Event Object
All event listeners provide the function with the event object. You need to add a
parameter to your function to access it!

<button id="theButton">Click Me!</button>


<script>
var theButton = document.getElementById("theButton");
theButton.addEventListener("click", function (event) {
console.log("clicked!");
console.log(event); event object
(name doesn’t matter)
}); (usually “e” or “event”)

</script>
Event Object
The event object contains all the information you would want to know about the event that just
happened: Which event, which element, when, coordinates on page, etc…

1. Click Here
2. See this

Event Object
Event Object
The most useful parts of the event object (that I can think of):

● event.keyCode - what button press


● event.type - “click” or “mouse” etc…
● event.target - element you clicked on
● event.target.value is for inputs.
● event.target.innerHTML or
event.target.textContent can gain
you access to what’s inside.
Page Color
Page Color
1. Copy this code, add to the <body> and <script>
2. How does it work?

<button class="colorButton" >red</button> var colorBtns =


<button class="colorButton" >blue</button> document.getElementsByClassName("colorButton");
<button class="colorButton" >green</button>
<button for ( var btn of colorBtns ) {
class="colorButton" >yellow</button>
btn.addEventListener("click", function (event) {
<button class="colorButton" >pink</button>
var color = event.target.innerHTML;
<button
document.body.style.backgroundColor = color;
class="colorButton" >orange</button>
});
<button
}
class="colorButton" >purple</button>
<button class="colorButton" >black</button>
<button class="colorButton" >white</button>
<button class="colorButton" >gray</button>
Append Input
Append Input
1. Copy this code, add to the <body> and <script>
2. How does it work?

var input = document.getElementById("input"); <input type="text" id="input" />


var target = document.getElementById("target"); <div id="target"></div>

input.addEventListener("keydown", function (event){


if (event.key === "Enter") {
var htmlText = input.value;
target.innerHTML += htmlText;
target.innerHTML += "<br>";
input.value = "";
}
});
100 Boxes
100 Boxes
1. Read this code below, what do you think it does?
body {
2. Make a new HTML file
margin: 0;
3. Copy the CSS into a <style> tag.
display: flex; 4. Copy the JS into a <script> tag.
flex-wrap: wrap; 5. Run it. What do you see?
}
.box { How does this code work?
height: 10vh; Can you change the box colors!
width: 10%;
outline: 1px solid
black; for (var x = 0; x < 100; x++) {
} var bgColor = `background-color: rgb(0,0,${2.55 * x})`;
var div = `<div class="box" style="${bgColor}"></div>`;
document.body.innerHTML += div;
}
Q&A

You might also like