当前位置:Gxlcms > html代码 > avalon2学习教程10事件绑定_html/css_WEB-ITnose

avalon2学习教程10事件绑定_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:7人阅读

avalon2的事件指令,比起avalon1来强大多了。

首先其内部是使用事件代理实现的,能冒泡的事件全部绑定document上。只有旧式IE的几个事件还绑定在原元素上。

其次,this直接指向vmodel,元素节点则通过e.target获取。如果要传入多个参数,需要指定事件对象,还是与原来一样使用$event

{{@ddd}}

再次,添加了一些专门针对事件回调的过滤器

  1. 对按键进行限制的过滤器esc,tab,enter,space,del,up,left,right,down

  2. 对事件方法stopPropagation, preventDefault进行简化的过滤器stop, prevent

最后,对事件回调进行缓存,防止重复生成。

事件绑定是使用ms-on-☆绑定来实现,但avalon也提供了许多快捷方式,让用户能直接以ms-eventName调用那些常用事件,如下

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

avalon的事件绑定支持多投事件机制(同一个元素可以绑定N个同种事件,如ms-click=fn, ms-click-1=fn2, ms-click-2=fn3)

            ms-on                         

            ms-on                         

            ms-on                         

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

             ms-mouseenter, ms-mouseleave                         

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

            ms-on-mousewheel                         

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

人气教程排行