HTML and CSS Reference
In-Depth Information
• The
false
in the previous code snippet controls exactly when to respond
to the event. In short, events can be triggered during two phases: the capture
phase and bubbling phase. In the capture phase, a particular element would
trigger an event after all its parent elements in the DOM had triggered the
event. The bubbling phase is the opposite; a particular element triggers the
event before its parent containing elements. A value of
true
means the
event listener responds during the capture phase, and a value of
false
means it responds during the bubbling phase. The value is usually set to
false
.
• By adding additional calls to
addEventListener()
, you can associate
more than one function with a single event.
Sorting a list using a drag-and-drop operation
Let's look at another example of a drag-and-drop operation, in the form of a user sortable
list. For this example, you'll create an ordered list where the user can—through a drag-
and-drop operation—rearrange the order of the list items.
To begin, duplicate the
jstemplate
directory from earlier and rename it
dnd_list
. Edit the
index.html
file to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Apprentice</title>
<link rel="stylesheet" type="text/css"
href="css/styles.css" />
<script
type="text/javascript"
sr-
c="js/script.js" defer></script>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
Search WWH ::
Custom Search