Editing DOM event (section)

=== DOM Level 0 ===
This event handling model was introduced by [[Netscape Navigator]], and remains the most cross-browser model {{As of|2005|lc=on}}.{{Citation needed|date=September 2012}} There are two model types: the inline model and the traditional model.

==== Inline model ====
In the inline model,<ref>{{cite web
 |url= http://www.quirksmode.org/js/events_early.html
 |title= Early event handlers
 |publisher= Quirksmode.org
 |access-date= 15 September 2012
}}</ref> event handlers are added as attributes of elements. In the example below, an [[alert dialog box]] with the message "Hey Joe" appears after the [[hyperlink]] is clicked. The default click action is cancelled by returning false in the event handler.

<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Inline Event Handling</title>
</head>
<body>

	<h1>Inline Event Handling</h1>

	<p>Hey <a href="http://www.example.com" onclick="triggerAlert('Joe'); return false;">Joe</a>!</p>

	<script>
		function triggerAlert(name) {
			window.alert("Hey " + name);
		}
	</script>
</body>
</html>
</syntaxhighlight>

One common misconception{{Citation needed|date=September 2012}} with the inline model is the belief that it allows the registration of event handlers with custom arguments, e.g. <code>name</code> in the <code>triggerAlert</code> function. While it may seem like that is the case in the example above, what is really happening is that the [[JavaScript engine]] of the browser creates an [[anonymous function]] containing the statements in the <code>onclick</code> attribute. The <code>onclick</code> handler of the element would be bound to the following anonymous function:

<syntaxhighlight lang="javascript">
function () {
	triggerAlert('Joe');
	return false;
}
</syntaxhighlight>

This limitation of the JavaScript event model is usually overcome by assigning attributes to the function object of the event handler or by using [[Closure (computer science)|closures]].

==== 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]].