The listen transform places an event listener, for the given event, on the nodes returned by the selector. When the event is triggered the event object is passed as a parameter to the function call.
The event object is of type goog.event.Event. Documentation for this object can be found here.
(listen :click (fn [event].....))
Example:
The following action is triggered when we click the button
(em/at "#button1" (ev/listen :click #(ef/at (.-currentTarget %) (ef/content "I have been replaced"))))
Notice in the above example, we are using the at form as event handler.
The listen-live transform places an event listener on the selected node. When the event is triggered the event the event target is tested to see if it matches the selector and new event is created if it does. This is very similar to jQuery's on or live functionality.
The event object is of type goog.event.Event. Documentation for this object can be found here.
(listen-live :click selector (fn [event].....))
Example:
The following action is triggered when we click the button
(em/at "#doc-listen-live" (ev/listen-live :click "#button3" #(ef/at (.-currentTarget %) (ef/content "I have been replaced"))))
Notice in the above example, we are using the at form as event handler.
The remove-listeners transform removes listeners for a given event type on all nodes returned by the selector.
(remove-listeners :mouseover :mouseout ...)
Example: hover over me
The first defaction was called to setup the :mouseenter event on text "hover over me". The second defaction is triggered when we click the button.
(ef/at "#remove-demo" (do-> (ev/listen :mouseenter #(ef/at (.-currentTarget %) (ef/add-class "highlight"))) (ev/listen :mouseleave #(ef/at (.-currentTarget %) (ef/remove-class "highlight"))))) (em/defaction remove-demo [] "#remove-demo" (ev/remove-listeners :mouseenter :mouseleave))
All events below have cross browser support: