25avalon - 指令ms-on*（事件绑定）-CFANZ编程社区

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>