Skip to content

dom events

jiyinyiyong edited this page Apr 4, 2020 · 6 revisions

DOM events

Here is a simple demo handling input events:

(input {:on-input (fn [e dispatch!]
                      (println (:value e)))})

e is a HashMap with several entries:

(def e
  {:type "input"
   :original-event event})

The details:

(defn event->edn [event]
  (comment .log js/console "simplify event:" event)
  (-> (case (.-type event)
        "click"   {:type :click}
        "keydown" {:key-code (.-keyCode event), :type :keydown}
        "keyup"   {:key-code (.-keyCode event), :type :keyup}
        "input"   {:value (aget (.-target event) "value"), :type :input}
        "change"  {:value (aget (.-target event) "value"), :type :change}
        "focus"   {:type :focus}
        {:msg (str "Unhandled event: " (.-type event)), :type (.-type event)})
   (assoc :original-event event)))

Events are bound directly on the elements for simplicity and consistency. And it stops propagation when event is triggered.

Clone this wiki locally