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=" parent expanded"> <a class="module" href="list.html" title="Create observable lists."> can-define/list/list </a> <ul> <li> <span>events</span> <ul> <li class=" "> <a class="typedef" href="list/AddEvent.html" title="Event fired when items are added to the list."> add </a> </li> <li class=" "> <a class="typedef" href="list/LengthEvent.html" title="Event fired when items are added or removed from the list."> length </a> </li> <li class=" "> <a class="typedef" href="list/PropertyNameEvent.html" title="Event fired when a property on the list changes values."> propertyName </a> </li> <li class=" "> <a class="typedef" href="list/RemoveEvent.html" title="Event fired when items are removed from the list."> remove </a> </li> </ul> </li> <li> <span>prototype</span> <ul> <li class=" "> <a class="function" href="list.prototype.concat.html" title="Merge many collections together into a DefineList."> concat </a> </li> <li class=" "> <a class="function" href="list.prototype.filter.html" title="Filter a list to a new list of the matched items."> filter </a> </li> <li class=" "> <a class="function" href="list.prototype.forEach.html" title="Call a function for each element of a DefineList."> forEach </a> </li> <li class=" "> <a class="function" href="list.prototype.get.html" title="Gets an item or all items from a DefineList."> get </a> </li> <li class=" "> <a class="function" href="list.prototype.indexOf.html" title="Look for an item in a DefineList."> indexOf </a> </li> <li class=" "> <a class="function" href="list.prototype.join.html" title="Join a DefineList's elements into a string."> join </a> </li> <li class=" "> <a class="function" href="list.prototype.map.html" title="Map the values in this list to another list."> map </a> </li> <li class="current parent expanded"> <a class="function" href="list.prototype.on.html" title="Add event handlers to a list."> on </a> </li> <li class=" "> <a class="function" href="list.prototype.pop.html" title="Remove an element from the end of a DefineList."> pop </a> </li> <li class=" "> <a class="function" href="list.prototype.push.html" title="Add elements to the end of a list."> push </a> </li> <li class=" "> <a class="function" href="list.prototype.replace.html" title="Replace all the elements of a DefineList."> replace </a> </li> <li class=" "> <a class="function" href="list.prototype.reverse.html" title="Reverse the order of a DefineList."> reverse </a> </li> <li class=" "> <a class="function" href="list.prototype.serialize.html" title="Returns the a serialized version of this list."> serialize </a> </li> <li class=" "> <a class="function" href="list.prototype.set.html" title="Sets an item or property or items or properties on a list."> set </a> </li> <li class=" "> <a class="function" href="list.prototype.shift.html" title="Remove an item from the front of a list."> shift </a> </li> <li class=" "> <a class="function" href="list.prototype.slice.html" title="Make a copy of a part of a DefineList."> slice </a> </li> <li class=" "> <a class="function" href="list.prototype.sort.html" title="Sort the properties of a list."> sort </a> </li> <li class=" "> <a class="function" href="list.prototype.splice.html" title="Insert and remove elements from a DefineList."> splice </a> </li> <li class=" "> <a class="function" href="list.prototype.unshift.html" title="Add items to the beginning of a DefineList."> unshift </a> </li> <li class=" "> <a class="property" href="list.prototype.wildcard.html" title="Define default behavior for all properties and items in the list. Use list.prototype.itemsDefinition to define the default type of items in the list."> * </a> </li> <li class=" "> <a class="property" href="list.prototype.wildcardItems.html" title="Define default behavior for items in the list."> # </a> </li> </ul> </li> <li> <span>static</span> <ul> <li class=" "> <a class="function" href="list.extend.html" title="Define a custom list type."> extend </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="../map/map.html" title="Create observable objects."> can-define/map/map </a> </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="list.html">can-define/list/list</a></li> / <li><a href="list.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 list.</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/list/docs/prototype.on.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>list.on(eventType, handler)</code> </h2> <p>Listens to <code>eventType</code> on <code>list</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 list = new DefineList(["CanJS","StealJS"]) list.on("add", function(ev, added, index){ ... }); list.push("DoneJS"); </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.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{<a href="list.html" title="Create observable lists.">can-define/list/list</a>}</code>: <p>This list, for chaining.</p> </p> </div> </div> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-define/list/docs/prototype.on.md"},"description":"Add event handlers to a list. \n","title":"on","name":"can-define/list/list.prototype.on","type":"function","parent":"can-define/list/list.prototype","signatures":[{"code":"list.on(eventType, handler)","description":"\n\nListens to `eventType` on `list` 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 list = new DefineList([\"CanJS\",\"StealJS\"])\nlist.on(\"add\", function(ev, added, index){ ... });\nlist.push(\"DoneJS\");\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.\n"}],"returns":{"types":[{"type":"can-define/list/list"}],"description":"This list, 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.\n"},"_curReturn":{"types":[{"type":"can-define/list/list"}],"description":"This list, for chaining.\n"},"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>