25avalon - 指令ms-on*（事件绑定）

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

示例代码

	
		
		

		
		
			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++)
				}
			})
		

	

	
		< ! -- 一个元素绑定一种种事件的回调 -->
		

			
请点我
			
{{@str1}}
		
	

或者绑定多个回调：

	
		< ! -- 一个元素绑定多个同种事件的回调 -->
		

			
请点我
			
{{@str1}}
			
{{@str2}}
			
{{@str3}}