When beginners are learning web design, events can often be confusing. Are events part of HTML, Javascripts, or the DOM? What are they and how do we use them?

What is an Event?

HTML stands for Hypertext Markup Language. It is a language we use to give instructions to a browser how to structure and present information on a web page. A markup language cannot make decisions, store values, or respond to user choices beyond simple form elements. In order to make a HTML document dynamically responsive to user interaction, we must have a mechanism for the browser to be aware of itself and the different actions that take place. We do that through events.

An event is everything that happens within the scope of a session in a browser window. For example, opening and closing a browser window are events and are tracked by the browser software. Loading and unloading an HTML file are events. HTML elements have events. For example, with hypertext, i.e. links, moving the mouse over a link, off a link, or clicking a link are all events on that element.Â We can take advantage of the fact that the browser is aware of every event that happens. We can give a browser instructions to follow when an event occurs and thereby introduce change in the browser in response to user choice. That is how we introduce interactivity.

The Document Object Model (DOM)

The ability of a browser to be aware of the elements it contains and “sense” events that happen is a result of requiring a browser to structure how elements on a page are referenced and organized. That identification and organizing structure is called the DOM or Document Object Model. It organizes elements in a window into a tree-like structure. Through that hierarchy, it knows how to find and address every element on the page.

Is an event part of HTML, Javascript, or the DOM?

Reading the entry on the DOM in Wikipedia can shed some light on that question. Originally, different browsers gave more or less access to the elements on a web page via the scripting agents that were created to control the pages. IE used Visual Basic and JScripting to control pages rendered in IE. Netscape used Javascript to control pages rendered in Netscape. This proprietary method of controlling page elements was very inefficient and costly in the web design process and often resulted in pages that would not render correctly in multiple browsers. It became apparent after some time that multiple browsers would be used and that if the World Wide Wide was going to work efficiently, a standardized approach was needed.

The W3C brought the major browser vendors together to create a standardized method for allowing all browsers to control the elements on their pages so that code that was written could be predictably rendered on all browsers. In this light, browser agents (Firefox, IE, Safari, Opera, Chrome, etc) give access to page elements to both HTML and Javascript statements by way of the DOM.

How to access an event

It is up to discussion as to whether it is HTML or Javascript that actually “calls” an event. For example, the one of the first tags used in an HTML document is the <html> tag. Once the browser encounters that tag, it knows to render the page according to its understanding of the HTML language. Once it encounters the <script> tag, it knows to interpret the page statements to whatever language is indicated in the <script> tag. Unless you specifically tell the browser that you are using a scripting language, you can assume you are using HTML.

For example, the code…

… is an example of HTML coding. In this example the anchor tag calls function1(), defined elsewhere on the page in a <script> tag, when the mouse moves over the anchor link. The anchor tag is an HTML tag. The mouseover DOM event is being accessed, through HTML, in the same way a tag attribute is; i.e. the syntax of attribute name = attribute value is an HTML convention. The value of the event call is scripting code. So is the call an HTML attribute or is it a temporary call to a script using the underlying DOM. My guess is that different authors will argue both explanations.

References:

HTML event attributes, W3Schools. http://www.w3schools.com/html/html_eventattributes.asp
Javascript events, W3Schools. http://www.w3schools.com/js/js_events.asp
Document Object Model Events, W3C. http://www.w3.org/TR/DOM-Level-2-Events/events.html
Document Object Model. Wikipedia. http://en.wikipedia.org/wiki/Document_Object_Model
Udemy Javascript Tutorials, https://blog.udemy.com/javascript-tutorial-learn-the-basics/