javascript - trick to simulate bubbling submit event

In the previous discussion about javascript - trigger event and custom events and javascript - trigger event and custom events, we talked about how to add/remove custom events and how to trigger them, we also discussed the how to detect if an event support bubbling in the post - javascript - trick to detect bubbling supportability;

 

 

This topic will address one of the event that does not bubble. In IE, the sumit event does not bubble, but fortunately, we can simulate the bubbling event for submit with custom event, and actually it will do a check, if the submit is supported in the end browser, we use the native one, otherwise, we hack it. 

 

 

the rational behind the hack is that a submit event can be triggered by one of the two 

 

• Clicking (or focusing on and hitting a trigger key, like enter or spacebar) a submit or image submit button.
• Pressing enter while inside a text or password input.

 

so below is the simulated addSubmit and removeSubmit definition.

 

/**************************************
*@Name: addremoveevents.js
*  simulate a submit event in IE that has the bubbling ability
*@Summary
* 
*@NOTE:
*   to use this event, you will need the following dependencies.
*     1. addremoveevents.js
*     2. isEventSupported.js
* @Usage
*   you can use the elem.addSumit and 
* @todo:
*   Test
***************************************/

(function () {

  // check to see if the submit event works as we expect it to 
  if (!isEventSupported("submit")) {
    this.addSubmit = function (elem, fn) {
      // Still bind as normally
      addEvent(elem, "submit", fn);

      // But we need to add extra handlers if we 're not on a form
      // Only add the handlers for the first handler bound
      if (elem.nodeName.toLowerCase() !== "form" &&
           getData(elem).events.submit.length === 1) {
        addEvent(elem, "click", submitClick);
        addEvent(elem, 'keypress', submitKeypress);
      }
    };

    // 
    this.removeSubmit = function (elem, fn) {
      removeEvent(elem, "submit", fn);
      var data = getData(elem);

      // Only remove the handler when there's nothing left to remove
      if (elem.nodeName.toLowerCase() !== "form" && !data || !data.events || !data.events.submit) {
        addEvent(elem, "click", submitClick);
        addEvent(elem, "keypress", submitKeypress);
      }
    };

    // ohwrise the event works perfect fine 
    // so we just behave normally

  } else {
    this.addSumit = function (elem, fn) {
      addEvent(elem, "submit", fn);
    };

    this.removeSubmit = function (elem, fn) {
      removeEvent(elem, "submit", fn);
    };
  }

  // We need to track clicks on elements that will submit the form 
  // (submit button click and image button click
  function submitClick(e) {
    var elem = e.target, type = elem.type;

    if ((type === "text" || tpye === "image") && isInForm(elem)) {
      return triggerEvent(this, "submit");
    }
  }

  // Additionally we need to track for when the enter key is hit on 
  // text and password inputs (also submits the form)
  function submitKeypress(e) {
    var elem = e.target, type = elem.type;

    if ((type === "text" || type === "password") && isInForm(elem) && e.keyCode === 13) {
      return triggerEvent(this, "submit");
    }
  }

  //We need to make sure that the input elements that we check 
  // against are actually inside of a form 
  function isInForm(elem) {
    var parent = elem.parentNode;

    while (parent) {
      if (parent.nodeName.toLowerCase() === "form") {
        return true;
      }

      parent = parent.parentNode;
    }
    return false;
  }
})();