Events in HTML

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…

<a href=”file1.htm” mouseover=”function1()”>link1</a>

… 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:

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

document.write() function

One of my online students was baffled moving from HTML coding to javascript. This is not surprising since they are very different languages. For my students, and others, that are struggling, the following tutorial may be helpful, http://w3schools.com/js/js_intro.asp.

I don’t consider myself a coder. Others are far more qualified. Still I’ll take a stab at answering specific question you may have. For students, post the question in the discussion forum. For visitors post the question in my contact form.

For this article, let me see if I can address the things this student has questioned.

Q:”I typed the code in as shown, but I didn’t comprehend how it worked.”

A: Did the code work? Some of the authors examples are Explorer and PC centric. For example the status bar code does not work in Firefox. So if your code doesn’t work, I can give you an alternate approach to illustrate the concept of an event handler.

Q: What are the plus signs for in the script on J-15?

A: The “+” sign can perform different functions depending on the context. In an arithmetic operation, it performs addition. When it is between “strings”, i.e text, it concatenates the strings together. For example, document.write(“I love” + ” javascript”), prints the two strings “I love” and “javascript” together so it looks like “I love javascript” on the screen. It is often used to mix strings and variables together. You can find out more at the following URL http://w3schools.com/js/js_operators.asp

Q: Why are there parentheses, then quotes, then quotes within quotes?

A: On page J-15 in your text, there is code in Figures J-14, 15, and 16. In figure J-16 is the following code:

document.write(“<h3>” + name + “, to subscribe to our newsletter, fill out the form below. </h3>”)

document.write() is a function. It prints what ever is in the parenthesis to the screen. The code wants the following to print to the screen. The name of the person  followed by the text “to subscribe…”. The name information is retrieved by the variable assignment in Figure J-14, ie.

var name=prompt(“Type your first name”)

The person is prompted to enter their first name. That information is saved in the variable “name”. Then the document.write() function prints the contents of the variable, the following text, and surrounds it all with an <h3> tag. So it prints the <h3> tag, then adds the variable value, then the text followed by the ending </h3> tag.

Let me know if you found this little tutorial helpful. Drop me a line.