Backbone学习记录(7)
事件委托
<form>
<input type="text" class="txt">
<input type="button" class="btn" value="确认">
</form>
<span class="input-data"></span>
var FormView=Backbone.View.extend({
el:'form',
events:{
"blur .txt":"showdata",
"click .btn":"click"
},
showdata:function(){
console.log(this.$el);
},
click:function(){
console.log("confirm");
}
});
var form=new FormView();
这是一个很简单的事件委托的例子,新建了一个form的视图,把文本框的blur事件和按钮的单击事件都委托在form上。
测试结果,当输入字符串后鼠标离开焦点,控制台输出的是form这个jQ对象(如果是console.log(this.el),输出的自然是DOM原生的对象),但是怎么才能让this指向
对应的目标元素呢?
=======================================
今天想到可以
showdata:function(){
console.log(event.target.value);
}
来获取目标对象上的属性,但是我每次获取属性或者设置属性都要这么麻烦么??
Backbone学习记录(7)的更多相关文章
- Backbone学习记录(6)
路由 backbone将路由规则和一个方法名绑定到一起,来控制单页的hash,以及单页的前进后退. var UserRouter = Backbone.Router.extend({ routes: ...
- Backbone学习记录(5)
数据与服务器 var User=Backbone.Model.extend({ defaults:{ name:'susan', age:18 }, url:'/user'//数据提交的路径 }); ...
- Backbone学习记录(4)
事件绑定 on()方法 调用格式:object.on(event, callback, [context])"change" — 当attributes变化时"chan ...
- Backbone学习记录(3)
创建视图 同前面创建模型和集合的方式一样,Backbone.View.extend()即可创建视图 var UserView=Backbone.View.extend(); var view1=new ...
- Backbone学习记录(2)
创建一个集合 1)new Backbone.Collection()方式 var user=new Backbone.Model({'name':'susan'}); var list=new Bac ...
- Backbone学习记录(1)
去年买的<基于MVC的javascript Web富应用开发>,拖到现在还没看完,作者介绍了三个MVC框架,Spine ,backbone和javascriptMVC.1和2在国内的流行度 ...
- Backbone 学习笔记
Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户 ...
- Quartz 学习记录1
原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...
- Java 静态内部类与非静态内部类 学习记录.
目的 为什么会有这篇文章呢,是因为我在学习各种框架的时候发现很多框架都用到了这些内部类的小技巧,虽然我平时写代码的时候基本不用,但是看别人代码的话至少要了解基本知识吧,另外到底内部类应该应用在哪些场合 ...
随机推荐
- ul li menu
第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1">首页</a>&l ...
- JasperReport 中文问题解决
1 运行环境 1.1 JasperReport 3.5 JasperReports 是iReport的核心内容.它是一个强有力的开源报表产生工具,可以将内容输出到屏幕上.打印机或生成PDF ...
- hrtimer高精度定时器的简单使用【学习笔记】
#include <linux/module.h> #include <linux/kernel.h> #include <linux/hrtimer.h> #in ...
- POJ3685 Matrix —— 二分
题目链接:http://poj.org/problem?id=3685 Matrix Time Limit: 6000MS Memory Limit: 65536K Total Submissio ...
- 计算机学院大学生程序设计竞赛(2015’12)Happy Value
Happy Value Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- Oracle:通过oracle sql developer工具导入excel数据
我使用的是oracle sql developer3.1版本,以前developer2.×老版本的excel导入功能有问题. excel文件内容如下: 第一步:找到要导入的表,右键-->导入数据 ...
- I.MX6 lcd lvds 注册流程
/************************************************************************ * I.MX6 lcd lvds 注册流程 * 说明 ...
- 【Codeforces 947A】 Primal Sport
[题目链接] 点击打开链接 [算法] 不难看出,x1的范围是[x2-P(x2)+1,x2],x0的范围是[x1-P(x1)+1,x1] 我们可以先做一遍线性筛,然后暴力就可以了 [代码] #inclu ...
- 详细的Ajax使用
1. ajax对xml的接收和处理 xml主要作用: 主要保存和传输数据 1. xml文档结构 dom操作xml getElementsByTagName(); //根据标签名获取元素 childNo ...
- 007--linux常用命令nginx和nfs服务
作业: 集群搭建 1.部署nginx反向代理三个web服务,调度算法使用加权轮询: 2.所有web服务使用共享存储nfs,保证所有web都对其有读写权限,保证数据一致性: 一.nginx服务 1. 先 ...