What are the HTML On Attributes ? (known also as event handler content attributes)

Devtool Chrome Event Listener

About

This page is about HTML attribute that starts with on…

They are the second way to define an event handler. The frist way being to use the the on property of the Javascript element object known as the IDL handler (or event handler IDL attribute).

That's why this on HTML attribute are known as event handler content attributes

The name of the content attribute is the same as the name of the event handler.

Example

A onclick event handler

<button class="btn btn-info" onclick="console.log('Bouh!')" >Click Me</button>

Value

The handler value (ie code) sets in the on attribute must contain the body of javascript function.

The function body can:

  • use this that gives access back to the context element during the event.
  • return false to cancel the event

In the specification, it's known as the internal raw uncompiled handler

Example

this

A inline event handler can use the inline variable this that gives access back to the element scoped by the type of event:

  • an onload attribute will give you back the window
  • an onclick attribute will give you back the HTML element

Example:

  • Log the text of the button in the console:
<button class="btn btn-info" onclick="console.log(this.textContent)" >Click me to show this text in the console</button>
  • this value is scoped demonstration
<body onload="alert(this)" onclick="alter(this)">

leads to:

  • [object Window] when the document is loaded,
  • [object HTMLBodyElement] whenever the user clicks something in the page.

preventDefault

If the return value is false, the event is canceled.

Example:

  • By default, a anchor would navigate to the URL specified in the href element but we can prevent it by returning false
<a href="https://datacadamia.com" onclick="console.log(`Navigation to ${this.href} cancelled`); return false;">Click me</a>
  • If you click on the link below, you would not navigate away but see the message instead

There are two exceptions, for historical reasons:

  • The onerror handlers on global objects, where returning true cancels the event.
  • The onbeforeunload handler, where returning any non-null and non-undefined value will cancel the event.

function (event, this)

This example is using the Window.event variable but it's deprecated Windows.event web api

A body event handler that calls a function with:

let handleClick = (event, element)=>{
   console.log('The event has:');
   console.log('  * the prototype: '+event.__proto__.toString());
   console.log('  * the type: '+event.type);
   console.log('  * been triggered by: '+event.srcElement.localName);
   console.log('The element clicked has:');
   console.log('  * the text: '+element.textContent);
   console.log('  * with the class '+element.className);
};
<button class="btn btn-info" onclick="handleClick(event, this)" >Click Me</button>
<!--
Same as
<button class="btn btn-info" onclick="handleClick(window.event, this)" >Click Me</button>
-->

Documentation / Reference





Discover More
Browser
Browser - Javascript

javascript script in the browser Javascript code can be executed via the script html tag via the eval function that evaluates a string as javascript ...
Devtool Chrome Event Listener
DOM - Click Event (OnClick)

1001 ways to handle a the click event. The click event occurs when the pointing device button is clicked over an element. The onclick on attribute may be used with most elements. A click is a mousedown...
Devtool Chrome Event Listener
DOM - Event PreventDefault

If you don't want to have the default beahavior (such as following a link), you can prevent it with the event.preventDefault() function. It still allow the event propagation but disable the default action....
Devtool Chrome Event Listener
DOM - Event handler

A event handler is a function that handles the event and gets called with the event occurs
DOM - Load event (onload, load listener)

The load event is an event that is fired / emitted on: an HTML element that fetch resources on the browser window when the page has finish loading. This event is a timing page load event To...
Devtool Chrome Event Listener
DOM - Mouseenter event (in a element) with Javascript

An article about the mousenter event with Javascript examples
Devtool Chrome Event Listener
DOM Event - Keydown

A Keydown is an input device event that tracks when a key goes down on the keyboard. keyup You can attach it to all element. This is also possible to create advanced accesskey (ie...
Devtool Chrome Event Listener
DOM Event Handler - On Properties with Javascript (Interface Definition Language - IDL )

An IDL event handler is a way to define an event handler for one element via the on javascript properties known as the Interface Definition Language (IDL) (ie defined in the object interface, in the code)...
Devtool Chrome Event Listener
Event MouseDown (OnMouseDown)

The mousedown event occurs when the pointing device button is pressed. click event handler content attribute (ie on HTML attribute Example of function with the mousedown event. The Javascript...
Devtool Chrome Event Listener
Event MouseUp (OnMouseUp)

The mouseup event occurs when the pointing device button is released. click event handler content attribute (ie on HTML attribute Example of function with the mouseup event. The Javascript...



Share this page:
Follow us:
Task Runner