Resources: This page on W3schools
I wanted to better understand javascript event handlers because I've been encountering them a lot in the react work I'm doing.
This is not a tutorial about jsx, but so you can follow my thought process;
An event handler in jsx looks like this;
(here's the function part of it)
buttonAlert(event) {
event.preventDefault();
alert("you clicked me! ");
}
and you render it like this;
render() {
return (
<div className={this.state.clicked}>
<button className='alrtbtn' onClick = {this.buttonAlert}> what did i do </button>
</div>
);
}
So this got me to thinking about what event handlers look like in vanilla javascript since jsx is like a step removed from that.
I read this article about event javascript event handlers and took this example off of it;
window.addEventListener("mousedown",function(event){
alert("window");
console.log(event);
});
I had to look up how to run this- you need to run it out of the console but, I just wanted to run it from a regular file. So I read that I needed to make an .html file with all the html tags, stuck that baby in there, and then I just opened the file from chrome.
It worked pretty well! when I clicked on the window I got an alert. I added a button to it, making sure to put it in a scripttag
</script>
<p id ='p'>hi there</p>
<button id ='btn' onclick="myFunction()">click me</button>
<script>
function myFunction() {
document.getElementById("p").style.color = "red";
}
</script>
I was trying to make the paragraph tag change colors when you clicked the button but didin't get it fully working in time. I've posted all the code below maybe we can finish it. Mostly works fine!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
window.addEventListener("mousedown",function(event){
alert("window");
console.log(event);
});
</script>
<p id ='p'>hi there</p>
<button id ='btn' onclick="myFunction()">click me</button>
<script>
function myFunction() {
document.getElementById("p").style.color = "red";
}
</script>
</body>
</html>
This is all well and good but I want to redirect attention to the larger picture here when it comes to event handlers and the possibilities of what you can do with these. check out this list of event handlers and I'll point out something cool about them
here you have the available events, but also the category those events belong to, like 'mouseover' type or 'Animation Event' type...
if you click on THAT, you see a list of properties or methods of this kind of event, and a description of what it does.
All of these properties are things you can further manipulate even after you've indicated you want an event to take place. For instance, if you want an alert to appear after a button is clicked, you can use the onclick event which is in the category of a 'mouse event' however the properties and methods for this kind of event include one called clickX and clickY which tells you where the cursor was on the page when you clicked (gives you coordinates) and you can set conditions based on this (like if your cursor is at < or = 200 in the x axis and 150 in the yaxis you want a goat to fly through the screen)...
so you can set conditions based on these details which explains how videogames are able to be manipulated such that complex actions can be taken by these objects and it just goes on and on and boggles the mind with what is possible.
I feel like I much better understand the landscape of eventhandlers now, given my introduction to them in JSX and the rooting of understanding in vanilla javascript.