how to use event bubbling cancellation

I've looked everywhere for a code on how to stop event bubbling to occur, and I've found one from the Quirksmode website, which is this:

function doSomething(e){
    if(!e) var e = window.event;
    e.cancelBubble = true;
    if(e.stopPropagation) e.stopPropagation();
}

But I don't know how and where to use it. What is the 'e' parameter used as (or what should be passed as 'e')? Is this function to be called in an event handler code? ...etc?

I need some help, please can someone give me some hint?

Basically I have 4 elements that have an 'onchange' handler called 'updateAvailableAttributes()', like this:

<select id="deliveryMethod" name="deliveryMethod" onchange="updateAvailableAttributes();"></select>

<select id="formatMethod" name="formatMethod" onchange="updateAvailableAttributes();"></select>

<select id="yearsMethod" name="yearsMethod" onchange="updateAvailableAttributes();"></select>

<select id="updateMethod" name="updateMethod" onchange="updateAvailableAttributes();"></select>

Here is the updateAvailableAttributes() script:

function updateAvailableAttributes() {
var form = document.forms["orderDefinition"];
form.elements["formChangeRequest"].value = "true";
$.ajax({
  type: "POST",
  url: "ajax/possibleValues.html",
  data: $("form#orderDefinition").serialize(),
  success: function(response){
    $('#usercontent .sleeve .toprow').html(response);

    applyValidation();
    radioButtonHighlightSelection();

  },
  error: function(response, ioArgs) {
         if (response.status == 601) {
             sessionTimedOut();
         } 
      }
});

// Display a "please wait" message
$("#waitingMsgOverlay, #waitingMsgBox, #waitingMsg, #waitingMsgParag").ajaxStart(function(){
      var map = document.getElementById("OrderMap");
      map.disableApplication();
      $(this).show();
      radioButtonHighlightSelection();
  }).ajaxStop(function(){
      var map = document.getElementById("OrderMap");
      map.enableApplication();
      $(this).hide();
      $("#toolpanel").height($("#orderMap").height());
      radioButtonHigh开发者_JAVA百科lightSelection();
});}

My question is, how do I incorporate the 'doSomething(e)' with 'updateAvailableAttributes()' I have already on the 'onchange' event handler?

Thank you in advance.

The whole doSomething is the event handler itself. You just register the event exactly as you would if there was no parameter. The "e" parameter is provided by the JavaScript runtime itself.

e is the event. For example if u have a div inside another div and both of them have a js click handler called doSomething. so in the onclick attribute use onclick="doSomething(event);" if you click on the inner div outer will not handle it now

In DOM model there are various events associated with an element e.g. onclick. If you want to handle any event you attach an event listener to an element. e.g. element.addEventListner(event,yourfunction,bubble).

see this http://www.quirksmode.org/js/events_advanced.html