Editing DOM event (section)

==== Traditional model ====
In the traditional model,<ref>{{cite web
 |url= http://www.quirksmode.org/js/events_tradmod.html
 |title= Traditional event registration model
 |publisher= Quirksmode.org
 |access-date= 15 September 2012
}}</ref> event handlers can be added or removed by scripts. Like the inline model, each event can only have one event handler registered. The event is added by assigning the handler name to the event property of the element object. To remove an event handler, simply set the property to null:
<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Traditional Event Handling</title>
</head>

<body>
	<h1>Traditional Event Handling</h1>
	
	<p>Hey Joe!</p>

	<script>
		var triggerAlert = function () {
			window.alert("Hey Joe");
		};
		
		// Assign an event handler
		document.onclick = triggerAlert;
		
		// Assign another event handler
		window.onload = triggerAlert;
		
		// Remove the event handler that was just assigned
		window.onload = null;
	</script>
</body>
</html>
</syntaxhighlight>

To add parameters:
<syntaxhighlight lang="javascript">
var name = 'Joe';
document.onclick = (function (name) {
	return function () {
		alert('Hey ' + name + '!');
	};
}(name));
</syntaxhighlight>

Inner functions preserve their [[Scope (programming)|scope]].