JavaScript Events
JavaScript Event Object
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
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.
What the Event Object Holds
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
Syntax
javascript
element.addEventListener("click", function (event) {
console.log(event.target);
});You do not pass it yourself; the browser supplies it.
event.target
This is the element that actually caused the event.
Example
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.
target Versus currentTarget
When a click lands on a child, target is the child.
currentTarget is always the element the listener sits on.
Example
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.
Reading a Value from the Target
Data attributes on the target are a tidy way to carry information.
Example
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.
One Handler, Several Events
type lets one function serve more than one event.
Example
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.
timeStamp
Every event records when it happened, in milliseconds since the page loaded.
Example
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
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>Try It Yourself
Run the above example in the Try It Editor.
Try showing the text:
Use event.target.textContent instead of the data attribute.
Important Points
- The browser passes an event object to every handler.
typeis the event name.targetis where the event started.currentTargetis where the handler is attached.- Data attributes on the target carry information neatly.
Conclusion
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.