ms-on* 介绍
此绑定为元素添加交互功能，对用户行为作出响应. ms-on-*="xxx"是其使用形式, *代表click, mouseover, touchstart等事件名，只能与小写形式定义， xxx是事件回调本身，可以是方法名，或表达式。
默认事件回调的第一个参数是事件对象,并进行标准化处理. 如果你是用ms-on-click="@fn(el, 1)“这样的传参方式，第一个传参被你占用， 而你又想用事件对象，可以使用$event标识符，即ms-on-click=”@fn(el, 1, $event)" 那么第三个参数就是事件对象。
如果你想绑定多个点击事件,可以用ms-on-click-1="@fn(el)", ms-on-click-2="@fn2(el)",ms-on-click-3="@fn3(el)"来添加。
并且,avalon对常用的事件,还做了快捷处理,你可以省掉中间的on。
默认对以下事件做快捷处理
animationend、 blur、 change、 input、 click、 dblclick、 focus、 keydown、 keypress、 keyup、 mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、 mouseover、 mouseup、 scroll、 submit
示例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="avalon/dist/avalon.js"></script> <script> var count = 0 var model = avalon.define({ $id: "multi-click", str1: "1", str2: "2", str3: "3", click0: function() { model.str1 = "xxxxxxxxx" + (count++) }, click1: function() { model.str2 = "xxxxxxxxx" + (count++) }, click2: function() { model.str3 = "xxxxxxxxx" + (count++) } }) </script> </head> <body> < ! -- 一个元素绑定一种种事件的回调 --> <div ms-controller="multi-click"> <div ms-click="@click0">请点我</div> <div>{{@str1}}</div> </div> </body> </html>
或者绑定多个回调：
<body> < ! -- 一个元素绑定多个同种事件的回调 --> <div ms-controller="multi-click"> <div ms-click="@click0" ms-click-1="@click1" ms-click-2="@click2">请点我</div> <div>{{@str1}}</div> <div>{{@str2}}</div> <div>{{@str3}}</div> </div> </body>
