JSFiddle - React, Tailwind, and code Playground

by Nazmus Nasir

HTML

<!-- Easy JavaScript # 31 - More Event Listeners! -->
<p>
Welcome to the 31st Easy JavaScript tutorial, part of <a href="http://www.easyprogramming.net">EasyProgramming.net</a>. Let's look at and practice more event listeners!
</p>
<p>
There are many kinds of events that your browser can listen for. Some examples are:
</p>
<ul>
<li>Click/Double Click</li>
<li>Mouse Over/Out</li>
<li>Key Up/Down</li>
<li>Scroll/Resize (window object)</li>
<li>Focus</li>
<li>Blur</li>
<li>Load</li>
</ul>

<p>
See more events at MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener</a>
</p>
<h2>
Syntax of an Event Listener:</h2>
<p>
<code><pre>
  element.addEventListener("event",function(){
    //do something when the event takes place
  });</pre>
</code>
</p>
<p>
Let's take a look!
</p>
<button id="name">Name</button>
<!--<button id="city">City</button>
<!--<button id="changeGreen">Change Font Color Green</button>
<button id="changeRed">Change Font Color Red</button> -->

<p>
<!-- Your Name is <span id="outputName">____</span>. The city in which you live is <span id="outputCity">____</span>. -->
</p>
<p>
<input id="userAction" type="text" size="60"/>
<span id="keyPress"></span>
</p>

JavaScript

document.getElementById("name").addEventListener("mouseover",function(){
	var btnName = this.getAttribute('id');
  document.getElementById("userAction").value = btnName + " has been moused over";
});

document.getElementById("name").addEventListener("mouseout",function(){
	var btnName = this.getAttribute('id');
  document.getElementById("userAction").value = btnName + " has been moused out of";
});

document.getElementById("name").addEventListener("dblclick",function(){
	var btnName = this.getAttribute('id');
  document.getElementById("userAction").value = btnName + " has been double clicked";
});

document.getElementById("userAction").addEventListener("focus",function(){
	var btnName = this.getAttribute('id');
  document.getElementById("userAction").value = btnName + " has been focused on";
});

document.getElementById("userAction").addEventListener("blur",function(){
	var btnName = this.getAttribute('id');
  document.getElementById("userAction").value = btnName + " has been focused out of";
});

document.getElementById("userAction").addEventListener("keydown",function(){
	document.getElementById("keyPress").innerText = "Key has been pressed";
});

document.getElementById("userAction").addEventListener("keyup",function(){
	document.getElementById("keyPress").innerText = "Key has been let go, whyyyyy?";
});