• typedef



The event object dispatched when an attribute changes on an element.



  1. attributeName {String}

    The name of the attribute that was changed.

  2. oldValue {String}

    The old value of the attribute.

  3. target {HTMLElement}

    The attribute that changed.

  4. type="attributes" {String}Optional

    The type is always "attributes" for an attributes event.

  5. bubbles=false {Boolean}Optional

    Attributes events do not bubble.


Listen to an attributes event on an element with the base-library's NodeList. For example, with jQuery:

$(el).bind("attributes", function(ev){
  ev.type // "attributes"
  ev.attributeName // "title"
  ev.oldValue // "" // el
$(el).attr("title","Mr. Sprinkles")

Listen to an attributes event with can.Control like:

  "attributes": function(el, ev){

Listen to an attributes event with can.Component's events object like:

  tag: "panel",
        events: {
            "attributes": function(el, ev){

With jQuery, in browsers that support MutationObsever you can set attributes direction with setAttribute like:

el.setAttribute("title","Mr. Sprinkles");

To create an attributes event in all browsers, you must use the base-library NodeList's attribute methods.

For jQuery or Zepto, use $.fn.attr

 $(el).attr("title","Mr. Sprinkles");

For Mootools use Element::set:

 $(el).set("title","Mr. Sprinkles")

For Dojo, use dojo.setAttr or dojo.removeAttr;

 dojo.setAttr(el,"title","Mr. Sprinkles");

For YUI use can.attr.set like:

can.attr.set(el,"title","Mr. Sprinkles");

Asynchronous dispatching

Unlike all other events in CanJS, "attributes" events are dispatched asynchronously. That means that attribute event handlers are not fired until the all current operations are complete. For example:

$(div).bind("attributes", function(){
   console.log("attributes handler")

console.log("about to change title")
$(el).attr("title","Mr. Sprinkles");
console.log("changed title")


> about to change title
> changed title
> attributes handler