Web Technologies - Old Questions

5.  What are the two traditional ways of assigning event handlers in DOM? Explain.

Event handlers refer to specific, user imitated actions within the webpage, such as the moving of your mouse over a link, the clicking on a link, or submission of a form. 

The 2 traditional ways of assigning event handlers in DOM are: via HTML, or scripting. In both cases, a function or code is attached at the end, which is executed when the handler detects the specified event.

1) Via HTML, using attributes

We can define an event handler directly inside the relevant HTML tag, by embedding it as a attribute. A piece of JavaScript is also included to tell the browser to perform something when the event occurs. For example,

<a href="https://collegenote.pythonanywhere.com/" onMouseover="window.status='Click here for CSIT note';return true" onMouseout="window.status=''">CollegeNote</a>

2) Via scripting

You can also assign and set up event handlers to elements using scripting, and inside your script . This allows for the event handlers to be dynamically set up, without having to mess around with the HTML codes on the page.

When setting up event handlers for an element directly inside your script, the code to execute for the events must be defined inside a function.

E.g.

<a ID="test" href="https://collegenote.pythonanywhere.com/">CollegeNote</a> 

<script type="text/javascript"> 

function changestatus(){

window.status="Click here for CSIT note"

return true

} 

function changebackstatus(){

window.status=''

} 

document.getElementById("test").onmouseover=changestatus

document.getElementById("test").onmouseout=changebackstatus 

</script>