WARNING: This documentation is for an old version of mithril! Please see the current docs for more accurate info.


This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.

Typically, it's used in conjunction with m.prop to implement data binding in the view-to-model direction.

This method is provided to decouple the browser's event model from the controller/logic model.

You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).


//standalone usage
document.body.onclick = m.withAttr("title", function(value) {
    //alerts the title of the body element when it's clicked

A contrived example of bi-directional data binding

var user = {
    model: function(name) {
        this.name = m.prop(name);
    controller: function() {
        return {user: new user.model("John Doe")};
    view: function(controller) {
        m.render("body", [
            m("input", {onchange: m.withAttr("value", controller.user.name), value: controller.user.name()})


How to read signatures

EventHandler withAttr(String property, void callback(any value) [, any callbackThis])

    EventHandler :: void handler(Event e)
  • String property

    Defines the property of the DOM element whose value will be passed to the callback.

  • void callback(any value)

    This function will be called with the value of the defined property as an argument.

    • any value

      This is the value of the defined DOM element's property.

  • any callbackThis

    The object which the this keyword points to for the callback

  • returns EventHandler handler

    This handler method can be assigned to properties like onclick, or passed as callbacks to addEventListener.