340Part IIIDocument Objects Referencefalse. See the discussion of the ondragevent handler earlier in this chapter for more detailson the sequence of drag-related events. ExampleSee Listing 15-37 of the ondragevent handler to see how to apply the ondropevent handlerin a typical drag-and-drop scenario. Related Items:event.dataTransferobject; ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstartevent handlers. onfilterchangeCompatibility:WinIE4+, MacIE-, NN-, Moz-, Safari- The onfilterchangeevent fires whenever an object s visual filter switches to a new state or atransition completes (a transition may be extended over time). Only objects that accommodatefilters and transitions in IE (primarily block elements and form controls) receive the event. A common usage of the onfilterchangeevent is to trigger the next transition within asequence of transition activities. This may include an infinite loop transition, for which theobject receiving the event toggles between two transition states. If you don t want to get intoa loop of that kind, place the different sets of content into their own positionable elementsand use the onfilterchangeevent handler in one to trigger the transition in the other. ExampleListing 15-39 demonstrates how the onfilterchangeevent handler can trigger a secondtransition effect after another one completes. The onloadevent handler triggers the firsteffect. Although the onfilterchangeevent handler works with most of the same objects inIE4 as IE5, the filter object transition properties are not reflected in a convenient form. Thesyntax shown in Listing 15-39 uses the new ActiveX filter control found in IE5.5+ (described inChapter 30). Listing 15-39: Using the onFilterChange Event Handler

ondragenter and ondragleave Event Handlers

Select any character(s) from this paragraph, and slowly drag it aroundthe page. When the dragging action enters the large header above, thestatus bar displays when the onDragEnter event handler fires. When youleave the header, the message is cleared via the onDragLeave eventhandler.

Related Items:ondrag, ondragend, ondragstart, ondropevent handlers. ondragstart(See ondrag) ondropCompatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The ondropevent fires on the drop target element as soon as the user releases the mouse but- ton at the end of a drag-and-drop operation. Microsoft recommends that you denote a drop target by applying the ondragenter, ondragover, and ondropevent handlers to the target ele- ment. In each of those event handlers, you should set the dataTransfer.dropEffectto thetransfer effect you wish to portray in the drag-and-drop operation (signified by a different cur- sor for each type). These settings should match the dataTransfer.effectAllowedpropertythat is usually set in the ondragstartevent handler. Each of the three drop-related handlersshould also override the default event behavior by setting the event.returnValueproperty toelementObject.ondrop

338Part IIIDocument Objects ReferenceListing 15-37(continued)
round doll red ball pretty

Pat said, Oh my, the       is so      !

Reset One event handler not shown in Listing 15-37 is ondragend. You can use this event to displaythe elapsed time for each successful drag operation. Because the event fires on the dragsource element, you can implement it in the tag and filter events similar to the waythe ondragstartor ondragevent handlers filter events for the tdelement. Related Items:event.dataTransferobject; ondragenter, ondragleave, ondragover, ondropevent handlers. ondragenterondragleaveondragoverCompatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- These events fire during a drag operation. When the cursor enters the rectangular space of anelement on the page, the ondragenterevent fires on that element. Immediately thereafter, the ondragleaveevent fires on the element from which the cursor came. While this mayseem to occur out of sequence from the physical action, the events always fire in this order. Depending on the speed of the client computer s CPU and the speed of the user s draggingaction, one or the other of these events may not fire especially if the physical action out- strips the computer s capability to fire the events in time. The ondragoverevent fires continually while a dragged cursor is atop an element. In thecourse of dragging from one point on the page to another, the ondragoverevent targetchanges with the element beneath the cursor. If no other drag-related events are firing (themouse button is still down in the drag operation, but the cursor is not moving), the ondragand ondragoverevents fire continually, alternating between the two. You should have the ondragoverevent handler of a drop target element set the event.returnValueproperty to false. See the discussion of the ondragevent handler earlier in this chapter for more details on the sequence of drag-related events. elementObject.ondrag

337Chapter 15Generic HTML Element Objectstimer = 0; } } } function handleDrop() { var elem = event.srcElement; var passedData = event.dataTransfer.getData( Text ); var errMsg = ; if (passedData) { // reconvert passed string to an arraypassedData = passedData.split( : ); if (elem.id == blank1 ) { if (passedData[1] == noun ) { event.dataTransfer.dropEffect = copy ; event.srcElement.innerText = passedData[0]; } else { errMsg = You can t put an adjective into the noun placeholder. ; } } else if (elem.id == blank2 ) { if (passedData[1] == adjective ) { event.dataTransfer.dropEffect = copy ; event.srcElement.innerText = passedData[0]; } else { errMsg = You can t put a noun into the adjective placeholder. ; } } if (errMsg) { alert(errMsg); } } } function cancelDefault() { if (event.srcElement.id.indexOf( blank ) == 0) { event.dataTransfer.dropEffect = copy ; event.returnValue = false; } }

Dragging Event Handlers

Your goal is to drag one noun and one adjective from the followingtable into the blanks of the sentence. Select a word from the tableand drag it to the desired blank. When you release the mouse, the wordwill appear in the blank.You have two seconds to complete each blank.

ContinuedelementObject.ondrag

Posted in Tomcat | No Comments »

Pat said, Oh my, the       is so      !

Reset Related Items:onbeforecopy, onbeforecut, onbeforepaste, and onpasteevent handlers. ondblclickCompatibility:WinIE4+, MacIE4+, NN4+, Moz1+, Safari1+ The ondblclickevent fires after the second click of a double-click sequence. The timingbetween clicks depends on the client s mouse control panel settings. The onclickevent alsofires, but only after the first of the two clicks. In general, it is rarely a good design to have an element perform one task when the mouse issingle-clicked and a different task if double-clicked. With the event sequence employed in mod- ern browsers, this isn t practical anyway (the onclickevent always fires, even when the userdouble-clicks). But it is not uncommon to have the mouse down action perform some helperaction. You see this in most icon-based file systems: if you click a file icon, it is highlighted atelementObject.oncopy

331Chapter 15Generic HTML Element ObjectsIn the case of the oncutevent handler, your script is also responsible for cutting the elementor selected content from the page. To eliminate all of the content of an element, you can setthe element s innerHTMLor innerTextproperty to an empty string. For a selection, use theselection.createRange()method to generate a TextRangeobject whose contents you canmanipulate through the TextRangeobject s methods. ExampleListing 15-36 shows both the onbeforecutand oncutevent handlers in action (as well asonbeforepasteand onpaste). Notice how the handleCut()function not only stuffs theselected word into the clipboardDataobject, but it also erases the selected text from thetable cell element from where it came. If you replace the onbeforecutand oncutevent han- dlers with onbeforecopyand oncopy(and change handleCut()to not eliminate the innertext of the event source element), the operation works with copy and paste instead of cut andpaste. I demonstrate this later in the chapter in Listing 15-45. Listing 15-36: Cutting and Pasting under Script Control