事件绑定

    如果你想绑定多个点击事件,可以用ms-on-click-1="@fn(el)",
    ms-on-click-2="@fn2(el)",ms-on-click-3="@fn3(el)"    来添加。

    并且,avalon对常用的事件,还做了快捷处理,你可以省掉中间的on。

    avalon默认对以下事件做快捷处理:

    以前ms-on-的值只能是vm中的一个函数名ms-on-click="fnName", 现在其值可以是表达式,如ms-on-click="el.open = !el.open", 与原生的onclick定义方式更相近.以前ms-on-的函数,this是指向绑定事件的元素本身,现在this是指向vm, 元素本身可以直接从e.target中取得.

    ms-on-会优先考虑使用事件代理方式绑定事件,将事件绑在根节点上!这会带来极大的性能优化!ms-on-的值转换为函数后,如果发现其内部不存在ms-for动态生成的变量,框架会将它们缓存起来!添加了一系列针对事件的过滤器对按键进行限制的过滤器esc，tab，enter，space，del，up，left，right，down对事件方法stopPropagation, preventDefault进行简化的过滤器stop, prevent

    1. var vm = avalon.define({
    2.     $id: "test",
    3.     firstName: "司徒",
    4.     array: ["aaa", "bbb", "ccc"],
    5.     argsClick: function(e, a, b) {
    6.         alert([].slice.call(arguments).join(" "))
    7.     },
    8.     loopClick: function(a, e) {
    9.         alert(a + "  " + e.type)
    10.     },
    11.     status: "",
    12.     callback: function(e) {
    13.         vm.status = e.type
    14.     },
    15.     field: "",
    16.     check: function(e) {
    17.         vm.field = e.target.value + "  " + e.type
    18.     },
    19.     submit: function() {
    20.         var data = vm.$model
    21.         if (window.JSON) {
    22.             setTimeout(function() {
    23.                 alert(JSON.stringify(data))
    24.             })
    25.         }
    26.     }
    1. <fieldset ms-controller="test">
    2.     <legend>有关事件回调传参</legend>
    3.     <div ms-mouseenter="@callback" ms-mouseleave="@callback">{{@status}}<br/>
    4.         <input ms-on-input="@check"/>{{@field}}
    5.     </div>
    6.     <div ms-click="@argsClick($event, 100, @firstName)">点我</div>
    7.         <p ms-click="@loopClick(el, $event)">{{el}}</p>
    8.     </div>
    9.     <button ms-click="@submit" type="button">点我</button>
    10. </fieldset>

    绑定多个同种事件的例子：

    1. var count = 0
    2. var model = avalon.define({
    3.     $id: "multi-click",
    4.     str1: "1",
    5.     str2: "2",
    6.     str3: "3",
    7.     click0: function() {
    8.         model.str1 = "xxxxxxxxx" + (count++)
    9.     },
    10.     click1: function() {
    11.         model.str2 = "xxxxxxxxx" + (count++)
    12.     },
    13.     click2: function() {
    14.         model.str3 = "xxxxxxxxx" + (count++)
    15.     }
    16. })
    1.  avalon.define({
    2.       $id: "xxx",
    3.       fn: function() {
    4.           console.log("11111111")
    5.       },
    6.       fn1: function() {
    7.           console.log("2222222")
    8.       },
    9.       fn2: function() {
    11.       }
    12.   })
    1. <div ms-controller="xxx" 
    2.     ms-on-mouseenter-2="@fn1"
    3.     ms-on-mouseenter-1="@fn2"
    4.     style="width:100px;height:100px;background: red;"
    5.     >
    6. </div>

    avalon已经对ms-mouseenter, ms-mouseleave进行修复，可以在这里与这里了解这两个事件。 到chrome30时，所有浏览器都原生支持这两个事件。

    1. avalon.define({
    2.     $id: "test",
    3.     text: "",
    4.     fn1: function (e) {
    5.        this.text = e.target.className + " "+ e.type
    6.     },
    7.     fn2: function (e) {
    8.        this.text = e.target.className + " "+ e.type
    9.     }
    10. })
    1.     <div class="aaa" ms-controller="test">
    2.       <div class="bbb" ms-mouseenter="@fn1" ms-mouseleave="@fn2">
    3.           <div class="ccc" >
    4.               {{@text}}
    5.           </div>
    6.       </div>
    7.     </div>

    最后是mousewheel事件的修改，主要问题是出现firefox上， 它死活也不愿意支持mousewheel，在avalon里是用DOMMouseScroll或wheel实现模拟的。 我们在事件对象通过wheelDelta属性是否为正数判定它在向上滚动。

    1.  avalon.define({
    2.       $id: "event4",
    3.       text: "",
    4.       callback: function(e) {
    5.           this.text = e.wheelDelta + "  " + e.type
    6.       }
    7.   })
    1. <div ms-controller="event4">
    2.     <div ms-on-mousewheel="@callback" id="aaa" style="background: #1ba9ba;width:200px;height: 200px;">
    3.         {{@text}}

    此外avalon还对input，animationend事件进行修复，大家也可以直接用avalon.bind, avalon.fn.bind来绑定这些事件。但建议都用ms-on绑定来处理。