User input

Traditional DOM events are used to handle user input and relay that info back to the nodes in the scene. In Famous, DOM events bubble up the scene graph and program events are emitted down.

Clicks

A key DOM event is the click. Here we add a 'click' listener to node and an '.onReceive()' method to handle it.

Events are picked up on the node where the DOM element is attached. The .addUIEvent() method accepts the DOM event name passed in as a string ('click'). Adding an .onReceive() method to the node (or component attached to the node) will pick up all events.

Event Bubbling

DOM events bubble up the scene graph. All "parent" nodes in the scene graph receive their own and all of their children's events by adding an .onReceive() method.

Additionally, components with an .onReceive() method can receive all of the same events from the node where they are attached.

node.addComponent({
    onReceive: function(event, payload){
       // This will receive all DOM events from `node`
       // and all child nodes below it  
    }
})

.onReceive()

When added to a node or component, the .onReceive() method is called whenever an event passes through the node. The method gives access to the event name (as a string) and an event object containing detailed information about the event.

node.addComponent({
    onReceive: function(event, payload){
       // Access the node where event 
       // originated from with --> payload.node
    }
})

Among other information, the event object ( named payload above ) gives access to the node where the event originated.

Custom Events

Nodes can emit custom events down the scene graph using the .emit() method. The emit method accepts an event name as a string and a payload object as its two arguments.

Events are sent to all child nodes (and all attached components) with an .onReceive() method. It is important to note that events cannot be emitted up the scene graph.

Drag and Drop

Drag and drop functionality is easy to acheive with a Gesture Handler.

Read more at the Gesture Handler section.

Input Elements and Drag

Here we demonstrate several event types working together including grabbing input from a <textarea>.

Click the grey square and type something in to see it in action!