Jump to content

error bubbling


alleyCat

Recommended Posts

error bubbling? Never heard of it :) There is a built in JavaScript function that tests if a value is a number or not: isNaN()I have wrote a small example, try typing in a number or string of text. :)

<html><head><script type="text/javascript">function check () {var val=document.getElementById("box1").value;if(isNaN(val))alert(val+" is is not a number"); else alert(val+" is a number");}</script></head><body>Enter a number or string: <input type="text" id="box1" /><input type="button" onclick="check()" value="Test"/></body></html>

Link to comment
Share on other sites

Say you've got umm...

<script type='text/javascript'>function doSomething(){  alert('this alert comes on key down');}function keyme(){ window.event.cancelBubble=true;}document.write('<input value="">');document.write('<input onkeydown="keyme()" value="">');</script><BODY onkeydown="doSomething()">

Try typing in the first box... alert comes up. Now try typing in the second. :) You've stopped the event bubbling up the hierachy to the next one (the top level onKeyDown in the body tag), so it types everything normally.

Link to comment
Share on other sites

Heh, sorry:

<script type='text/javascript'>function doSomething(){ alert('this alert comes on key down');}function keyme(evt){var myEvent = (window.event) ? window.event : evt;myEvent.cancelBubble=true;}document.write('<input value="">');document.write('<input onkeydown="keyme(event)" value="">');</script><BODY onkeydown="doSomething();">

Link to comment
Share on other sites

Hi anybody knows about error bubbling? which is used to prevent users from entering letters to an input field such as telephone box or calculator screen. cheers!
AlleyCat, Error is also an event in itself.In late 90's Microsoft came up with event bubbling and Netscape with event capturing. Those are differnet approaches for handling events. Netscape 4 supported event capturing but its buggy. So netscape changed to event bubbling. Now all the browsers support event bubbling.In the above code the first input has no event function attached; but still the event is passed to Body tag (which is parent class/parent node). This is event bubbling. The event passes to parent class regardless of whether its handled or not handled at the element level.For the second input it has event function which will be executed first. Then the event will propogate to BODY tag. The same event will fire again. It has fired twice. Once at the element level and second time at parent node level. This clarifies event bubbling. The event is fired at element level and again it will fire on parent class/node/tag. If you cancel event bubbling then the same code would not alert for the first element, and it would alert (element level event) only once. You wont get the body tag's event function executed.Check out this pagehttp://www.quirksmode.org/js/events_order.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>New Page 1</title><script type='text/javascript'>function doSomething(){alert('this alert comes on bubbled key down event');}function keyme(evt){//var myEvent = (window.event) ? window.event : evt;//myEvent.cancelBubble=true;alert('element event');}//document.write('<input value="">');//document.write('<input onkeydown="keyme(event)" value="">');</script></head><BODY onkeydown="doSomething();">This box does not have element level event <input value="">This box has element level event<input onkeydown="keyme(event)" value=""></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...