JavaScript Events
Every handler receives an event object describing what happened.
The browser passes it in automatically as the first argument.
It is usually called event or just e.
Example
javascript
document.body.innerHTML = '<button id="btn">Go</button>';
document.getElementById("btn").addEventListener("click", function (event) {
console.log(event.type);
});
document.getElementById("btn").click();The output is click.
type is the name of the event.
target is the element the event started on.
currentTarget is the element the handler is attached to.
Syntax
javascript
element.addEventListener("click", function (event) {
console.log(event.target);
});You do not pass it yourself; the browser supplies it.
This is the element that actually caused the event.
Example
javascript
document.body.innerHTML = '<button id="btn">Save</button>';
document.getElementById("btn").addEventListener("click", function (event) {
console.log(event.target.id);
console.log(event.target.textContent);
});
document.getElementById("btn").click();The output is btn then Save.
When a click lands on a child, target is the child.
currentTarget is always the element the listener sits on.
Example
javascript
document.body.innerHTML =
'<div id="box"><button id="btn">Go</button></div>';
document.getElementById("box").addEventListener("click", function (event) {
console.log("target: " + event.target.id);
console.log("currentTarget: " + event.currentTarget.id);
});
document.getElementById("btn").click();The click started on the button but was handled on the box.
Data attributes on the target are a tidy way to carry information.
Example
javascript
document.body.innerHTML =
'<button id="btn" data-action="delete">X</button>';
document.getElementById("btn").addEventListener("click", function (event) {
console.log(event.target.dataset.action);
});
document.getElementById("btn").click();The output is delete.
type lets one function serve more than one event.
Example
javascript
document.body.innerHTML = '<input id="field">';
const field = document.getElementById("field");
function report(event) {
console.log("got " + event.type);
}
field.addEventListener("focus", report);
field.addEventListener("input", report);
field.dispatchEvent(new Event("focus"));
field.dispatchEvent(new Event("input"));The same function handles both, and checks which one it got.
Every event records when it happened, in milliseconds since the page loaded.
Example
javascript
document.body.innerHTML = '<button id="btn">Go</button>';
document.getElementById("btn").addEventListener("click", function (event) {
console.log(typeof event.timeStamp);
});
document.getElementById("btn").click();This is occasionally useful for measuring how long something took.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Event Object</title>
</head>
<body>
<h1>The Event Object</h1>
<button id="save" data-action="save">Save</button>
<button id="delete" data-action="delete">Delete</button>
<p id="out"></p>
<script>
function handle(event) {
document.getElementById("out").textContent =
event.type + " on " + event.target.dataset.action;
}
document.getElementById("save").addEventListener("click", handle);
document.getElementById("delete").addEventListener("click", handle);
</script>
</body>
</html>Run the above example in the Try It Editor.
Try showing the text:
Use event.target.textContent instead of the data attribute.
type is the event name.target is where the event started.currentTarget is where the handler is attached.The event object is how a handler finds out what actually happened.
target is the property you will use most.
The difference between target and currentTarget becomes essential with delegation.