In which
case, you can avoid looping and just use the DOM methods to get to where you want to go.
target.parentNode.nextSibling.innerHTML = 'I have been found!';
Refer to the section ???Moving Around the DOM??? earlier in this chapter regarding the caveat
of using nextSibling.
When Event Delegation Won??™t Work
There are times when event delegation isn??™t the most appropriate solution??”usually when you
have an HTML element placed over those not in the same tree structure as a result of using
fixed, offset relative, or absolute positioning. Figure 2-7 shows an example of one relatively
positioned element overlapping another.
CHAPTER 2 n HTML, CSS, AND JAVASCRIPT 55
Figure 2-7. When one element overlaps another, the overlapping element initiates the event.
This might not seem like a common scenario??”and it really isn??™t. Most layouts do just fine.
It does, however, rear its ugly head when you drag and drop. Dragging an element over the
screen, you often want the element that you??™re dragging over to react to demonstrate that it is
a valid drop zone. However, because the dragged element is underneath the mouse cursor
(using absolute positioning), you have no way to use event delegation on the document to
easily pull out targets on the page.
As a result, you??™re left with using other means of determining whether the event is being
fired over an element you want, such as offsetting the dragged element or comparing the
mouse position with the position of the elements that would be drop targets.
Pages:
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109