GlobalEventHandlers.onclick
The onclick
property of the
GlobalEventHandlers
mixin is the event handler for
processing click
events on a given element.
The click
event is raised when the user clicks on an element. It fires
after the mousedown
and
mouseup
events, in that order.
Note: When using the click
event to
trigger an action, also consider adding this same action to the
keydown
event, to allow the use of that same
action by people who don't use a mouse or a touch screen.
Syntax
target.onclick = functionRef;
Value
functionRef
is a function name or a function
expression. The function receives a MouseEvent
object as its sole
argument. Within the function, this
will be the object
that onclick
was bound to (which will also match
event.currentTarget
)
Only one onclick
handler can be assigned to an object at a time. You may
prefer to use the EventTarget.addEventListener()
method instead, since
it's more flexible.
Examples
Detecting clicks
This example changes the color of an element when it's clicked upon.
HTML
<div id="demo">Click here</div>
JavaScript
document.getElementById('demo').onclick = function changeContent() {
document.getElementById('demo').textContent = "Help me";
document.getElementById('demo').style = "Color: red";
}
Result
Getting the coordinates of clicks
This example displays the coordinates at which the most recent mouse button click occurred.
HTML
<p>Click anywhere in this example.</p>
<p id="log"></p>
JavaScript
let log = document.getElementById('log');
document.onclick = inputChange;
function inputChange(e) {
log.textContent = `Position: (${e.clientX}, ${e.clientY})`;
}
Result
Specifications
Specification |
---|
HTML Standard # handler-onclick |
Browser compatibility
BCD tables only load in the browser
See also
click
event- Related event handlers