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>
<meta charset="utf-8" />
<title>HTML5 Apprentice</title>
<link rel="stylesheet" type="text/css"
href="css/styles.css" />
c="js/script.js" defer></script>
Search WWH ::

Custom Search