how to use event bubbling cancellation

Question

Hi All

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());
      radioButtonHighlightSelection();
});}

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

Thank you in advance.

Answer 1

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.

Answer 2

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

Answer 3

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