EventOrganizer

Inherit:Organizer

EventOrganizer handles the management of events such as installing event handlers and triggering events. It loads settings from the “events” section and sets event handlers to the component and elements inside.

EventOrganizer loads settings from the “events” section and sets event handlers. At the “beforeStart” timing, only the component events are set since elements inside the component are not loaded yet. After an HTML file is attached to the component and afterAppend event is triggered, it sets the event handlers for elements inside the component.

• events

• beforeStart
• afterAppend

Event settings are placed in the “events” section.

{
    "events": {
        <elementName>: { or [{
            "rootNode": <rootNode>,
            "handlers": {
                <eventName>: {
                    "handler": <handler>,
                    "listerOptions": <listnerOptions>,
                    "options": <options>,
                    "order": <order>,
                }
            }
        } or }]
    },
}

{
    "events": {
        <elementName>: {
            "rootNode": <rootNode>,
            "handlers": {
                <eventName>: <handler> or [<handler>]
            }
        }
    },
}

Type:String

An element name. If the ”rootNode“ is not specified, this value is treated as the element's id. If the value is “this”, it refers to the component itself. If the “rootNode” setting is specified, this value is nothing meaningful, just make sure it's a unique string.

Type:String

A selector string that points to target nodes to which the event handlers are attached. This value is passed to the querySelectorAll(). The same event handler is set to all the elements returned by querySelectorAll().

Type:String

An event name. Valid events are BitsmistJS events or Javascript native events. A value for this eventName can be an array of objects also.

Type:String/Function

An event handler. Can be a string or a function object. If a string is specified it is treated as the name of the event handler function. A method that has this name in the component is used as the event handler. The event handler will be bound to the component (unless specified in addEventHandler() parameter), so “this” points to the component itself.

Type:Object

An object that passed to event handlers via the “ex” parameter of event handlers.

Type:Number Default:0

A priority of an event handler. This value controls the order event handlers are executed when one element has several event handlers on one event. The greater the number, the higher the priority.

Type:Object

Options passed to Javascript native API addEventListener().

In this section, we explain how to specify target elements. It can be divided into whether it is a component itself or elements inside the component.

"events": {
    "this": {
        "handlers": {
            "doRefresh": this.onDoRefresh
        }
    }
}

Since <elementName> is ”this”, the event handler is set to the component itself.

"events": {
    "bar-header": {
        "handlers": {
            "doRefresh": this.onDoRefresh
        }
    }
}

Assuming this component's tag name is “bar-header”, you can set “bar-header” instead of “this”.

They can be placed in “rootNode”, also. In this case, the elementName “myself” is just a meaningless (to the library) string but should be a unique one.

"events": {
    "myself": {
        "rootNode": "bar-header" or ”this”
        "handlers": {
            "doRefresh": this.onDoRefresh
        }
    }
}

If an element has an id, you can specify it in <elementName>

"events": {
    "btn-menu": {
        "handlers": {
            "click": this.onBtnMenu_Click
        }
    }
}

In the above example, the event handler is set to an element that has id “btn-menu”.

You can use a selector string in “rootNode”.

"events": {
    "btn-menu": {
        "rootNode": ".buttons"
        "handlers": {
            "click": this.onBtnMenu_Click
        }
    }
}

It is no problem resulting in more than one element. Each event handler is set to all the elements matched.

We will show you how to specify an event handler.

"events": {
    "this": {
        "handlers": {
            "doRefresh": this.onDoRefresh
        }
    }
}

In the above example, a function object is specified as the event handler for the “doRefresh” event.

"events": {
    "this": {
        "handlers": {
            "doRefresh": "onDoRefresh"
        }
    }
}

In this example, a string is set as the event handler. In this case, the method that has the name “onDoRefresh” is searched from the components method, that is, this.onDoRefresh method.

"events": {
    "this": {
        "handlers": {
            "doRefresh": ["onDoRefresh1", this.onDoRefresh2]
        }
    }
}

In the above example, two event handlers are specified to one event. You can mix function objects and strings.

"events": {
    "this": {
        "handlers": {
            "doRefresh": {
                "handler": this.onDoRefresh,
                "options": {"value":"1"}
             }
        }
    }
}

In the next example, both an event handler and options are set at the same time. The options can be accessed from “ex” parameter of the event handler.

onDoRefresh(sender, e, ex)
{
    console.log("value =", ex.value); // console displays "value = 1"
}

In the next example, two handlers with each option are specified.

"events": {
    "this": {
        "handlers": {
            "doRefresh": [
                {
                    "handler": this.onDoRefresh1,
                    "options": {"value":"1"}
                 },
                {
                    "handler": "onDoRefresh2",
                    "options": {"value":"2"}
                 },
             ]
        }
    }
}

Type:undefined Inject:Component

Sets event handlers to elements.

undefined

Type:Function Inject:Component

Returns an event handler function object from the handlerInfo.

A Function object or undefined if a handler does not exist.

Type:undefined Inject:Component

Installs event handlers to elements as specified in handler info passed.

undefined

Type:undefined Inject:Component

Removes event handlers from elements.

undefined

Type:undefined Asynchronous Inject:Component

Triggers an event on an element. If the element has several event handlers on the event, functions are called one by one, waiting for the previous handler to finish and the next.

undefined

Type:undefined Asynchronous Inject:Component

Triggers an event. The difference between trigger() method is the triggerAsync() doesn't wait for the previous event handler to finish. Refer to trigger() for other details.