can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - on</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="../../static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../../../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../../../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../../../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../../../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../../../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../../../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../../../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../../../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../../../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class=" "> <a class="page" href="../../guides.html" title="Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:"> Guides </a> </li> <li class=" parent expanded"> <a class="page" href="../../can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> <ul> <li class=" "> <a class="module" href="../../can-component.html" title="Create a custom element that can be used to manage widgets or application logic."> can-component </a> </li> <li class=" "> <a class="module" href="../../can-compute.html" title="Create an observable value."> can-compute </a> </li> <li class=" "> <a class="module" href="../../can-connect.html" title="can-connect provides persisted data middleware. Use it to assemble powerful model layers for any JavaScript project."> can-connect </a> </li> <li class=" "> <a class="module" href="../../can-define.html" title="Exports the define method that defines observable properties and their behavior on a prototype object."> can-define </a> </li> <li class=" "> <a class="module" href="../list/list.html" title="Create observable lists."> can-define/list/list </a> </li> <li class=" parent expanded"> <a class="module" href="map.html" title="Create observable objects."> can-define/map/map </a> <ul> <li> <span>events</span> <ul> <li class=" "> <a class="typedef" href="map/KeysEvent.html" title="Event fired when a property is added."> __keys </a> </li> <li class=" "> <a class="typedef" href="map/PropertyNameEvent.html" title="Event fired when a property on the map changes values."> propertyName </a> </li> </ul> </li> <li> <span>static</span> <ul> <li class=" "> <a class="function" href="map.extend.html" title="Define a custom map type."> extend </a> </li> <li class=" "> <a class="property" href="map.seal.html" title="Defines if instances of the map should be sealed in development."> seal </a> </li> </ul> </li> <li> <span>prototype</span> <ul> <li class=" "> <a class="function" href="map.prototype.forEach.html" title="Call a function on each property of a DefineMap."> forEach </a> </li> <li class=" "> <a class="function" href="map.prototype.get.html" title="Get a value or all values from a DefineMap."> get </a> </li> <li class="current parent expanded"> <a class="function" href="map.prototype.on.html" title="Add event handlers to a map."> on </a> </li> <li class=" "> <a class="function" href="map.prototype.serialize.html" title="Get a serialized representation of the map instance and its children."> serialize </a> </li> <li class=" "> <a class="function" href="map.prototype.set.html" title="Sets multiple properties on a map instance or a property that wasn't predefined."> set </a> </li> <li class=" "> <a class="property" href="map.prototype.wildcard.html" title="Define default behavior for a Map instance."> * </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="function" href="../../can-route.html" title="Manage browser history and client state by synchronizing the window.location.hash with a map."> can-route </a> </li> <li class=" "> <a class="module" href="../../can-route-pushstate.html" title="Changes can-route to use pushstate to change the window's pathname instead of the hash. var route = require("can-route-pushstate"); route("{page}", { page: "home" }); route.ready(); route.attr("page", "user"); location.pathname; // -> "/user""> can-route-pushstate </a> </li> <li class=" "> <a class="module" href="../../can-set.html" title="can-set is a utility for comparing sets that are represented by the parameters commonly passed to service requests."> can-set </a> </li> <li class=" "> <a class="module" href="../../can-stache.html" title="Live binding Mustache and Handlebars-compatible templates."> can-stache </a> </li> <li class=" "> <a class="module" href="../../can-stache/helpers/route.html" title="Adds stache helpers that use can-route."> can-stache/helpers/route </a> </li> <li class=" "> <a class="module" href="../../can-stache-bindings.html" title="Provides template event, one-way, and two-way bindings."> can-stache-bindings </a> </li> </ul> </li> <li class=" "> <a class="page" href="../../can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> </li> <li class=" "> <a class="page" href="../../can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> </li> <li class=" "> <a class="page" href="../../can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../../../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../../../index.html">CanJS</a></li> / <li><a href="../../can-core.html">Core</a></li> / <li><a href="map.html">can-define/map/map</a></li> / <li><a href="map.prototype.on.html">on</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>on</h1> <div>function</div> </div> <section class="description"> <p>Add event handlers to a map.</p> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/canjs/tree/v3.0.0/node_modules/can-define/map/docs/prototype.on.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>map.on(eventType, handler)</code> </h2> <p>Listens to <code>eventType</code> on <code>map</code> and calls <code>handler</code> when the event is dispatched. This is simply a reference to <a href="../../can-event.on.html" title="can-event.on">can-event.on</a> as all of <a href="../../can-event.html" title="Add event functionality into your objects. The canEvent object provides a number of methods for handling events in objects. This functionality is best used by mixing the canEvent object into an object or prototype. However, event listeners can still be used even on objects that don't include canEvent. All methods provided by canEvent assume that they are mixed into an object -- this should be the object dispatching the events.">can-event</a> methods are available on <code>DefineMap</code>.</p> <pre><code class="language-js">var map = new DefineMap({name: "Justin"}) map.on("name", function(ev, newVal, oldVal){ newVal //-> "Brian" oldVal //-> "Justin" }); map.name = "Brian"; </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>eventType</b> <code>{String}</code>: <p>The type of event to bind this handler to.</p> </li> <li><b>handler</b> <code>{function(event, args...)}</code>: <p>The handler to be called when this type of event fires The signature of the handler depends on the type of event being bound. See below for details.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{<a href="map.html" title="Create observable objects.">can-define/map/map</a>}</code>: <p>This map, for chaining.</p> </p> </div> </div> <section class="body"> <h2>Use</h2> <p><code>on</code> binds event handlers to property changes on <code>DefineMap</code>s. When you change a property value, a <em>property name</em> event is fired, allowing other parts of your application to map the changes to the object.</p> <p>This event is useful for noticing changes to a specific property.</p> <pre><code>var o = new DefineMap({name: "Justin"}); o.on('name', function(ev, newVal, oldVal) { console.log('The value of a changed.'); }); </code></pre> <p>The parameters of the event handler for the <em>property name</em> event are:</p> <ul> <li><em>ev</em> The event object.</li> <li><em>newVal</em> The value of the property after the change. `</li> <li><em>oldVal</em> The value of the property before the change.</li> </ul> <p>Here is a concrete tour through the <em>property name</em> event handler's arguments:</p> <pre><code>var o = new DefineMap({a: undefined, b: undefined}); o.on('a', function(ev, newVal, oldVal) { console.log(newVal + ', ' + oldVal); }); o.a = 'Alexis'; // Alexis, undefined o.set('a', 'Adam'); // Adam, Alexis o.set({ 'a': 'Alice', // Alice, Adam 'b': 'Bob' }); o.a = undefined; // undefined, Alice </code></pre> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-define/map/docs/prototype.on.md"},"description":"Add event handlers to a map. \n","title":"on","name":"can-define/map/map.prototype.on","type":"function","parent":"can-define/map/map.prototype","signatures":[{"code":"map.on(eventType, handler)","description":"\n\nListens to `eventType` on `map` and calls `handler` when the event is dispatched. This is simply\na reference to [can-event.on can-event.on] as all of [can-event] methods are available on `DefineMap`.\n\n```js\nvar map = new DefineMap({name: \"Justin\"})\nmap.on(\"name\", function(ev, newVal, oldVal){\n newVal //-> \"Brian\"\n oldVal //-> \"Justin\"\n});\nmap.name = \"Brian\";\n```\n","params":[{"types":[{"type":"String"}],"name":"eventType","description":"The type of event to bind this handler to.\n"},{"types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[{"types":[{"type":"Event"}],"name":"event"},{"variable":true,"name":"args"}]}],"name":"handler","description":"The handler to be called when this type of event fires\nThe signature of the handler depends on the type of event being bound. See below\nfor details.\n"}],"returns":{"types":[{"type":"can-define/map/map"}],"description":"This map, for chaining.\n"}}],"_curParam":{"types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[{"types":[{"type":"Event"}],"name":"event"},{"variable":true,"name":"args"}]}],"name":"handler","description":"The handler to be called when this type of event fires\nThe signature of the handler depends on the type of event being bound. See below\nfor details.\n"},"_curReturn":{"types":[{"type":"can-define/map/map"}],"description":"This map, for chaining.\n"},"comment":" ","pathToRoot":"../../.."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="../../static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>