JavaScript Tutorial

The language for programming web pages.

JS Events

JavaScript Events

HTML events are things that happen to HTML elements. JavaScript can react to events using event handlers and event listeners.

Common Events:

Event	Description
onclick	Mouse click
onmouseover	Mouse over element
onkeydown	Key pressed
oninput	Input value changes
onsubmit	Form submitted
onload	Page/image loaded
onresize	Window resized

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  body{font-family:Arial;padding:20px;}
  .event-box{padding:15px;margin:8px 0;border-radius:8px;background:#f0f4ff;border:2px solid #e0e0e0;transition:all 0.2s;font-size:14px;}
  .event-box:hover{border-color:#f7df1e;background:#fffde7;}
  #log{background:#1e1e1e;color:#98c379;padding:15px;border-radius:8px;font-family:monospace;height:100px;overflow-y:auto;font-size:13px;margin-top:10px;}
</style>
</head>
<body>
<h2>Event Listener Demo</h2>
<div class="event-box" id="hoverBox">🖱️ Hover over me (mouseover/mouseout)</div>
<div class="event-box">⌨️ <input id="keyInput" type="text" placeholder="Type here (keydown)" style="border:none;background:transparent;width:80%;outline:none;font-size:1em;"></div>
<div class="event-box"><button id="clickBtn" style="padding:8px 20px;background:#f7df1e;color:#1a1a2e;border:none;border-radius:5px;cursor:pointer;font-weight:bold;">🖱️ Click Me</button></div>
<div id="log">// Events will appear here...</div>
<script>
function log(msg) {
  const d = document.getElementById("log");
  d.innerHTML = "["+new Date().toLocaleTimeString()+"] "+msg+"<br>"+d.innerHTML;
}
document.getElementById("hoverBox").addEventListener("mouseover",()=>log("mouseover fired!"));
document.getElementById("hoverBox").addEventListener("mouseout",()=>log("mouseout fired!"));
document.getElementById("clickBtn").addEventListener("click",()=>log("click fired! 🎉"));
document.getElementById("keyInput").addEventListener("keydown",e=>log("keydown: \'"+e.key+"\'"));
document.getElementById("keyInput").addEventListener("input",e=>log("input value: \'"+e.target.value+"\'"));
window.addEventListener("resize",()=>log("resize: "+window.innerWidth+"×"+window.innerHeight));
</script>
</body></html>

Result

Topics