[Xmlgraphics-batik Wiki] Update of "CustomJavaScriptEvents" by CameronMcCormack

[Apache Wiki <wi...@apache.org>]

Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Xmlgraphics-batik Wiki" for change notification.

The following page has been changed by CameronMcCormack:
http://wiki.apache.org/xmlgraphics-batik/CustomJavaScriptEvents

New page:
= Custom JavaScript Events =

According to the DOM Level 3 Events note, custom event objects must implement the CustomEvent interface.
Two extra methods beyond those defined in CustomEvent must be implemented, though.  The first is resumePropagation,
which is needed to cause the event to continue propagation after stopPropagation or stopImmediatePropagation
has been called.  The second is cloneEventObject, which is needed to create a copy of the custom event object
when the event is retargetted under sXBL processing.

Here is an example of an SVG document that uses a custom event object:

{{{
<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:xbl="http://www.w3.org/2004/xbl"
     xmlns:ex="http://example.org/test"
     version="1.2" width="400" height="400">

  <script>
    // -- CustomEvent --------------------------------------------------------

    CustomEvent.prototype = new Object();
    CustomEvent.prototype.constructor = CustomEvent;
    CustomEvent.superclass = Object.prototype;

    function CustomEvent(propertyNames) {
      this.propagationStopped = false;
      this.immediatePropagationStopped = false;
      this.defaultPrevented = false;
      this.propertyNames = propertyNames;
    }

    CustomEvent.prototype.initEvent = function(type, canBubbleArg,
                                               cancelableArg) {
      this.type = type;
      this.bubbles = canBubbleArg;
      this.cancelable = cancelableArg;
    };

    CustomEvent.prototype.initEventNS = function(namespaceURI, type,
                                                 canBubbleArg, cancelableArg) {
      this.namespaceURI = namespaceURI;
      this.type = type;
      this.bubbles = canBubbleArg;
      this.cancelable = cancelableArg;
    };

    CustomEvent.prototype.stopPropagation = function() {
      this.propagationStopped = true;
    };

    CustomEvent.prototype.stopImmediatePropagation = function() {
      this.immediatePropagationStopped = true;
    };

    CustomEvent.prototype.preventDefault = function() {
      this.defaultPrevented = true;
    };

    CustomEvent.prototype.isDefaultPrevented = function() {
      return this.defaultPrevented;
    };

    CustomEvent.prototype.setDispatchState = function(t, phase) {
      this.currentTarget = t;
      this.eventPhase = phase;
    };

    CustomEvent.prototype.isPropagationStopped = function() {
      return this.propagationStopped;
    };

    CustomEvent.prototype.isImmediatePropagationStopped = function() {
      return this.immediatePropagationStopped;
    };

    CustomEvent.prototype.resumePropagation = function() {
      this.propagationStopped = false;
      this.immediatePropagationStopped = false;
    };

    CustomEvent.prototype.resumePropagation = function() {
      this.propagationStopped = false;
      this.immediatePropagationStopped = false;
    };

    CustomEvent.prototype.cloneEventObject = function() {
      var evt = new CustomEvent(this.propertyNames);
      if (this.propertyNames) {
        for (var i in this.propertyNames) {
          evt[this.propertyNames[i]] = this[this.propertyNames[i]];
        }
      }
      return evt;
    };
  </script>

  <xbl:xbl>
    <xbl:definition element="ex:test">
      <xbl:template>
        <circle cx="200" cy="200" r="100" fill="red">
          <handler ev:event="click">
            var testEvt = new CustomEvent(["messageString"]);
            testEvt.initEventNS
              ("http://example.org/test", "message", true, true);
            testEvt.messageString = "hello";
            evt.target.dispatchEvent(testEvt);
          </handler>
          <handler ev:event="ex:message">
            var s = "circle: " + evt.messageString;
            if (evt.originalEvent) {
              s += " (not original)";
            }
            window.alert(s);
          </handler>
        </circle>
      </xbl:template>
    </xbl:definition>
  </xbl:xbl>

  <ex:test/>

  <handler ev:event="ex:message">
    var s = "svg: " + evt.messageString;
    if (evt.originalEvent) {
      s += " (not original)";
    }
    window.alert(s);
  </handler>
</svg>
}}}