迷你MVVM框架 avalonjs 学习教程14、事件绑定
之前的章节许多示例代码也或多或少地展示了如何使用ms-click来绑定事件了。能直接在模板上绑定是事件，这也是静态模板与动态绑定的一大区别。ms-click不是简单的onclick的别名，它在内部屏蔽了浏览器的差异，并且对许多浏览器暂时不支持的事件做了兼容处理。
总的来说，事件绑定是使用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），支持传参（默认第一个参数为事件对象，如果第一个位置被占了，我们可以在其他位置使用$event引用事件对象。）
<!DOCTYPE HTML>
<html>
<head>
<title>ms-on</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
firstName: "司徒",
array: ["aaa", "bbb", "ccc"],
argsClick: function(e, a, b) {
alert([].slice.call(arguments).join(" "))
},
loopClick: function(a, e) {
alert(a + " " + e.type)
},
status: "",
callback: function(e) {
model.status = e.type
},
field: "",
check: function(e) {
model.field = this.value + " " + e.type
},
submit: function() {
var data = model.$model
if (window.JSON) {
setTimeout(function() {
alert(JSON.stringify(data))
})
}
}
}) </script>
</head>
<body>
<fieldset ms-controller="test">
<legend>有关事件回调传参</legend>
<div ms-mouseenter="callback" ms-mouseleave="callback">{{status}}<br/>
<input ms-on-input="check"/>{{field}}
</div>
<div ms-click="argsClick($event, 100, firstName)">点我</div>
<div ms-each-el="array" >
<p ms-click="loopClick(el, $event)">{{el}}</p>
</div>
<button ms-click="submit">点我</button>
</fieldset>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>ms-on</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="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>
<fieldset>
<legend>一个元素绑定多个同种事件的回调</legend>
<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>
</fieldset>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>ms-on</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="avalon.js" ></script>
<script>
avalon.define({
$id: "xxx",
fn: function() {
console.log("11111111")
},
fn1: function() {
console.log("2222222")
},
fn2: function() {
console.log("3333333")
}
})
</script>
</head>
<body>
<div ms-controller="xxx"
ms-on-mouseenter-3="fn"
ms-on-mouseenter-2="fn1"
ms-on-mouseenter-1="fn2"
style="width:100px;height:100px;background: red;"
>
</div>
</body>
</html>
avalon已经对ms-mouseenter, ms-mouseleave进行修复，可以在这里与这里了解这两个事件。到chrome30时，所有浏览器都原生支持这两个事件。
<!DOCTYPE html> <html>
<head>
<title>ms-mouseenter, ms-mouseleave</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="avalon.js"></script>
<script>
avalon.define({
$id: "test",
fn1: function(e) {
console.log(e.type)
console.log(this)
},
fn2: function(e) {
console.log(e.type)
console.log(this)
}
})
</script>
</head> <body ms-controller="test">
<div ms-mouseenter="fn1" ms-mouseleave="fn2" style="background: red;width:200px;height: 200px;padding:20px;">
<div style="background: blue;width:160px;height: 160px;margin:20px;"></div>
</div>
</body> </html>
最后是mousewheel事件的修改，主要问题是出现firefox上，它死活也不愿意支持mousewheel，在avalon里是用DOMMouseScroll或wheel实现模拟的。我们在事件对象通过wheelDelta属性是否为正数判定它在向上滚动。
<!DOCTYPE html>
<html>
<head>
<title>ms-on-mousewheel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="avalon.js"></script>
<script>
var model = avalon.define({
$id: "test",
text: "",
callback: function(e) {
model.text = e.wheelDelta + " " + e.type
}
}) </script>
</head> <body ms-controller="test">
<div ms-on-mousewheel="callback" id="aaa" style="background: red;width:200px;height: 200px;">
{{text}}
</div>
</body>
</html>
此外avalon还对input，animationend事件进行修复，大家也可以直接用avalon.bind, avalon.fn.bind来绑定这些事件。但建议都用ms-on绑定来处理。
迷你MVVM框架 avalonjs 学习教程14、事件绑定的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- 迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项
本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能. 一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速 ...
- 迷你MVVM框架 avalonjs 学习教程4、数据填充
MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...
- 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密
avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程16、过滤器
avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...
随机推荐
- meta viewport 理解
移动设备上的浏览器如果不指明 viewport 这个meta,当你从移动设备上浏览网页的时候,它假设(你浏览的是桌面版并且你想看到所有的内容),不只是一个左上角.因此,它会把viewport的宽度设置 ...
- 基于DRL和TORCS的自动驾驶仿真系统——之环境配置
基于DRL和TORCS的自动驾驶仿真系统 --之环境配置 玩TORCS和DRL差不多有一整年了,开始的摸爬滚打都是不断碰壁过来的,近来在参与CMU的DRL10703课程学习和翻译志愿者工作,也将自己以 ...
- postman获取请求响应值
获取所有请求响应代码 var data = JSON.parse(responseBody); 把data的data值设置到token中 postman.setEnvironmentVari ...
- 【python】字符串函数
1.String模块中的常量: string.digits:数字0~9 string.letters:所有字母(大小写) string.lowercase:所有小写字母 string.printabl ...
- iPhone激活策略知识讲解：官方解锁和黑解
iPhone激活策略知识讲解:官方解锁和黑解 [复制链接] LEECHY 该用户从未签到 1372 XY豆 438 帖子 440 贡献 苹果花 积分 2250 发消息 电梯直达 楼主 发 ...
- SpringMVC中的重定向和转发的实现
1.请求转发和重定向的区别 请求重定向和请求转发都是web开发中资源跳转的方式. 请求转发是服务器内部的跳转 地址栏比发生变化 只有一个请求相应 可以通过request域对跳转目标的请求 请求重定向是 ...
- Makefile | Linux嵌入式编程 使用详细图解
针对的是对Makefile一点都不会的小白哦! 练习之前我们要做好准备: (1):第一步创建一个目录,因为实验过程中生成的文件会很多,不要把你系统里的文件搞得乱七八糟. [cjj@bogon ~]$ ...
- 未来的趋势发展 802.11v网络协议解析
目前的无线网络中,一个基站通常与拥有最强信号的接入点联系在一起.但是,这个接入点也许过载了.在802.11v标准中,包括了一个指令,接入点能够使用这个指令要求一个基站报告它支持的无线电信道.传输的功率 ...
- 如何在CentOS中添加Swap
1.检查 Swap 空间 在设置 Swap 文件之前,有必要先检查一下系统里有没有既存的 Swap 文件.运行以下命令: 1 swapon -s 如果返回的信息概要是空的,则表示 Swap 文件不存在 ...
- PHPExcel导入导出 若在thinkPHP3.2中使用（无论实例还是静态调用（如new classname或classname::function)都必须加反斜杠，因3.2就命名空间，如/classname
php利用PHPExcel类导出导入Excel用法 来源: 时间:2013-09-05 19:26:56 阅读数: 分享到: 16 [导读] PHPExcel类是php一个excel表格处理插 ...