Jump to content
Larry Ullman's Book Forums

Chapter 8: Event Handling Page 298, Preventing Default Behavior


Recommended Posts


function handleForm() {

// Do whatever.
if (errors) {
return false;

} else {

return true;
}

}

 

The text goes on to say

 


"Conversely returning anything other than false allows the default event behavior to occur (in that case, the forms submission).

The problem with returning false to prevent the default browser behavior is that it only works reliably when the event listener was registered using the traditional approach. For example say event.js added the form submissison event handler using the newer approach.

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

With that code, you would see that the form's submission would go through meaning that the form itself would be reset (upon resubmission) and the event listeners would not be present (they would have been created, but reset upon submission)." 

 

It's not clear to me why the U.addEvent custom method wouldn't work here.

 

When we defined the U object on page 276, the addEvent method already had a fall back for browsers that didn't support the addEventListener() method, as below:

 


addEvent: function(obj, type, fn) {

 'use strict';

 if (obj && obj.addEventListener) {

   obj.addEventListener(type, fn, false);

 } else {

   obj.attachEvent('on' + type, fn);

 }

}

 

Clearly, in the code above that attachEvent() method is used as an alternative for browsers that don't support the addEventListener() method.

 

Question now is why do need to use the e.preventDefault() method on top of everything?

 

Thanks,

Mark

Link to comment
Share on other sites

The traditional approach to event handling starts on PG.269. You will see the 'on' word in front on the traditional event handlers onload etc.

 

e.g

window.onload = function() { }

 

You can only assign single event handlers using this method and events can therefore be easily overwritten.

 

So this method you have here from the book below is the newer method which works to cover multiple browsers.

 

addEvent: function(obj, type, fn) {
'use strict';
if (obj && obj.addEventListener) {
 obj.addEventListener(type, fn, false);
} else {
 obj.attachEvent('on' + type, fn);
}
}

 

For this new method you have to use e.preventDefault to stop event handlers being reset with the form so they are no longer present. Its also am not quite clear to me what this means what is the gap between both? And what does reset of the form mean exactly?

 

Please take note of the errata for page 298: The fourth paragraph should begin “For browsers that do support…”.

Link to comment
Share on other sites

I find when doing this kind of coding that most of your answers will be answered as soon as you start practicing using the code. I am plowing through this book right now, not far to go, then after it is completed i will work on all the js common problems into my practice site. I think some of the worst stuff in the book which was this sibling, nodes, brothers and sisters stuff etc, that can be confusing, but then again if it was my own code it probably wouldn't be.

Link to comment
Share on other sites

 

For this new method you have to use e.preventDefault to stop event handlers being reset with the form so they are no longer present. Its also am not quite clear to me what this means what is the gap between both? And what does reset of the form mean exactly?

 

 

That threw me off too, I have no idea what the text is referring too. So they are no longer present, what exactly is no longer present? Whats reset?

 

I did figure the same thing, in that learning by doing would get my head around it hopefully in the near future. As I do get hyperfocused into these things.

 

As for now I'll just do what the book says and add

 


e.preventDefault () and e.returnValue = false 

Link to comment
Share on other sites

 Share

×
×
  • Create New...