HTML event Attribute

HTML event Attribute

The obsolete HTML event attribute was historically used on the <script> element to associate a script with a particular event. It was commonly used together with the obsolete for attribute to identify the element whose event should cause the script to run.

Historical Syntax

The event attribute could be placed on a <script> element together with the for attribute:

<button id="example-button">Click Me</button>

<script for="example-button" event="onclick">
  alert("The button was clicked.");
</script>

In this older approach, the for attribute identified the object associated with the script, while the event attribute identified the event that caused the script to run.

Historical Elements

The obsolete event attribute was associated with the <script> element.

Historical Use

The event attribute provided an older method of associating script code with an event. It was commonly paired with the for attribute on the same <script> element.

The for attribute identified the object associated with the script, while event specified an event such as a mouse or keyboard interaction. When that event occurred, supporting browsers could execute the script contained by the <script> element.

This placed the event association in attributes on the script element instead of registering the event through the DOM event system used by modern JavaScript.

Why It Became Obsolete

The event attribute became obsolete because modern browsers provide a standardized DOM event system for registering event listeners. JavaScript can locate an element and register one or more functions that respond when a particular event occurs.

This approach provides greater flexibility because event listeners can be added and removed through JavaScript without relying on obsolete attributes on the <script> element.

Modern Alternative

Use the DOM addEventListener() method instead of the obsolete event and for attributes.

Historical HTML

<button id="example-button">Click Me</button>

<script for="example-button" event="onclick">
  alert("The button was clicked.");
</script>

Modern HTML and JavaScript

<button id="example-button">Click Me</button>

<script>
const button = document.getElementById("example-button");

button.addEventListener("click", function () {
  alert("The button was clicked.");
});
</script>

The getElementById() method selects the button, and addEventListener() registers a function that runs when the button receives a click event.

Notice that the event name passed to addEventListener() is "click", not "onclick". Event listener methods use the event type without the on prefix.

Legacy Browser Support

The event attribute represents an older method of registering event handlers on <script> elements. Historical support was not a dependable basis for modern cross-browser development.

Modern browsers provide standardized DOM event mechanisms such as addEventListener(). New webpages should use these APIs rather than the obsolete event attribute.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Related Attributes

The obsolete event attribute was closely associated with another obsolete attribute on the <script> element:

• for - Historically identified the object associated with an event script. The event attribute identified the event that caused that script to run.

The obsolete for attribute on <script> should not be confused with the current for attribute used by elements such as <label>.

Specifications

The event attribute on the <script> element is obsolete. The HTML Living Standard directs authors to use DOM event mechanisms to register event listeners instead. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.