事件绑定

此绑定为元素添加交互功能，对用户行为作出响应. 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。

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

  1. animationend、 blur、 change、 input、 click、 dblclick、 focus、 keydown、 keypress、 keyup、 mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、 mouseover、 mouseup、 scroll、 submit

此外,avalon2相对avalon1，还做了以下强化:

以前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.     }
  27. })
  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.     <div ms-for="el in @array" >
  8.         <p ms-click="@loopClick(el, $event)">{{el}}</p>
  9.     </div>
  10.     <button ms-click="@submit" type="button">点我</button>
  11. </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. <fieldset>
  2.     <legend>一个元素绑定多个同种事件的回调</legend>
  3.     <div ms-controller="multi-click">
  4.         <div ms-click="@click0" ms-click-1="@click1" ms-click-2="@click2" >请点我</div>
  5.         <div>{{@str1}}</div>
  6.         <div>{{@str2}}</div>
  7.         <div>{{@str3}}</div>
  8.     </div>
  9. </fieldset>

回调执行顺序的例子：

  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() {
  10.           console.log("3333333")
  11.       }
  12.   })
  1. <div ms-controller="xxx" 
  2.     ms-on-mouseenter-3="@fn"
  3.     ms-on-mouseenter-2="@fn1"
  4.     ms-on-mouseenter-1="@fn2"
  5.     style="width:100px;height:100px;background: red;"
  6.     >
  7. </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. .bbb{
  2.     background: #1ba9ba;
  3.     width:200px;
  4.     height: 200px;
  5.     padding:20px;
  6.     box-sizing:content-box;
  7. }
  8. .ccc{
  9.     background: #168795;
  10.     width:160px;
  11.     text-align: center;
  12.     line-height: 160px;
  13.     height: 160px;
  14.     margin:20px;
  15.     box-sizing:content-box;
  16. }
  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}}
  4.     </div>
  5. </div>

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