Chapter 8 Pursue

[thodgson 0]

In the next to last bullet exercise on Chapter 8's Pursue, I tried substituting

 

U.addEvent(U.$('theForm'), 'submit', setHandlers);   // W3C form

 

for

 

U.$('theForm').onsubmit = setHandlers;  // traditional form

 

in events.js and it didn't work.  Why not?

 

What it seemed to do was the default behavior - reset the form, without calling any handlers.

 

On the other hand, I was able to add a second event listener to the form submission and it worked, i.e., this worked:

 

    U.$('theForm').onsubmit = setHandlers;                   // traditional
    U.addEvent(U.$('theForm'), 'submit', reportEvent);  // W3C

 

but this didn't:

 

    U.addEvent(U.$('theForm'), 'submit', setHandlers);  // W3C

    U.addEvent(U.$('theForm'), 'submit', reportEvent);  // W3C

 

They would seem to be equivalent, no?

 

[HartleySan 826]

Hello, and welcome to the forum.

 

Were there any errors reported in your browser console?

Could you please provide the relevant code?

[thodgson 0]

Thanks.  No, no errors.   I was running in Eclipse, but when I pulled it up in the browser (Firefox), I saw that it actually was calling setHandlers but then form submission still seemed to occur.  Here's the current code:

 

// Script 8.8 - events.js

// Function called when events occur.
// Function reports the event type and target.
window.onload = function(){
    'use strict';
//    U.$('theForm').onsubmit = setHandlers;
    U.addEvent(U.$('theForm'), 'submit', setHandlers);
//    U.addEvent(U.$('theForm'), 'submit', reportEvent);
};

function setHandlers(e){
    'use strict';
    var events = ['mouseover','mouseout','click','keypress','blur'];
    
    for (var i=0, count=events.length; i < count; i++){
        var checkbox = U.$(events);
        if (checkbox.checked){
            U.addEvent(document,events,reportEvent);
        }
        else {
            U.removeEvent(document,events,reportEvent);
        }
    }
    if (typeof e == 'undefined') e=window.event;
    var target = e.target || e.srcElement;
    
    if (e.type == 'submit'){
        U.$('output').value = "HERE I AM\n";
        reportEvent(e);
    }
    
    if (e.preventDefault){
        e.preventDefault;
    }
    else {
        e.returnValue = false;
    }
    return false;
}

function reportEvent(e){
    'use strict';
    if (typeof e == 'undefined') e = window.event;
    var target = e.target || e.srcElement;
    
    var msg = target.nodeName + ': ' + e.type + '\n';
    U.$('output').value += msg;
}

[HartleySan 826]

Try adding parentheses after your e.preventDefault statement and see what happens.

Also, if you're doing that, you shouldn't need the return false at the end.

[thodgson 0]

OMG.  I knew it was something simple!  Thanks.