事件委托

    <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)的更多相关文章

  1. Backbone学习记录(6)

    路由 backbone将路由规则和一个方法名绑定到一起,来控制单页的hash,以及单页的前进后退. var UserRouter = Backbone.Router.extend({ routes: ...

  2. Backbone学习记录(5)

    数据与服务器 var User=Backbone.Model.extend({ defaults:{ name:'susan', age:18 }, url:'/user'//数据提交的路径 }); ...

  3. Backbone学习记录(4)

    事件绑定  on()方法 调用格式:object.on(event, callback, [context])"change" — 当attributes变化时"chan ...

  4. Backbone学习记录(3)

    创建视图 同前面创建模型和集合的方式一样,Backbone.View.extend()即可创建视图 var UserView=Backbone.View.extend(); var view1=new ...

  5. Backbone学习记录(2)

    创建一个集合 1)new Backbone.Collection()方式 var user=new Backbone.Model({'name':'susan'}); var list=new Bac ...

  6. Backbone学习记录(1)

    去年买的<基于MVC的javascript Web富应用开发>,拖到现在还没看完,作者介绍了三个MVC框架,Spine ,backbone和javascriptMVC.1和2在国内的流行度 ...

  7. Backbone 学习笔记

    Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户 ...

  8. Quartz 学习记录1

    原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...

  9. Java 静态内部类与非静态内部类 学习记录.

    目的 为什么会有这篇文章呢,是因为我在学习各种框架的时候发现很多框架都用到了这些内部类的小技巧,虽然我平时写代码的时候基本不用,但是看别人代码的话至少要了解基本知识吧,另外到底内部类应该应用在哪些场合 ...

随机推荐

  1. C# 自定义控件及引用自动义控件

    1.http://www.cnblogs.com/hjxzjp/p/7823292.html   优先考虑从现有的控件中进行派生,并添加所需要的功能. 在解决方案资源管理器窗口中设置:引用----&g ...

  2. gradle配置

    一.你不想看到的 Gradle Build Running 话说在天朝当程序员也是很不容易的,不管是查阅资料还是下载东西,很多时候你会发现自己上网姿势不对,当然对大多数程序员来说,这都不是事儿.这次重 ...

  3. javascript查找子节点时,html里的换行可能会被当成节点

    1.直接去HTML里找到该换行的地方去掉换行 2.写一个方法把元素类型为空格而且是文本都删除 function del_ff(elem){ var elem_child = elem.childNod ...

  4. ES6 一些新特性的总结

    一.箭头函数 ES6中新增了一个箭头函数   ()=>,箭头函数通俗点讲就是匿名函数.箭头函数还有不同点在于改变函数中this,和js中的.bind  的方法差不多,继承后指向的不是最新的函数, ...

  5. get all sites under IIS

    https://stackoverflow.com/questions/2555668/how-to-programmatically-get-sites-list-and-virtual-dirs- ...

  6. dedecms列表页如何调用栏目关键词和描述

    问:dedecms列表页如何调用栏目关键词和描述 答:有人问起dedecms列表页如何调用栏目关键词和描述.解答如下: 自己实验了下总结方法如下:(以下方法使用于栏目封面和列表和内容页,其他的地方没有 ...

  7. 设置Tomcat的jvm内存问题

    tomcat的jvm大小设置与操作系统以及jdk有关:具体来说: 1.操作系统是32bit的,程序最大内存访问空间是4G, 2的32次方,这是硬件决定的,跟windows linux没有任何关系. 2 ...

  8. FPU同步(翻译)

    本篇翻译的原英文在:http://mauve.mizuumi.net/2013/06/16/desyncs-and-fpu-synchronization/#more-725(可能要FQ) 如果你曾经 ...

  9. Java 网络处理(net io URL 等)

    1. URL 类 URL 类的两个重要方法: openStream():打开到此 URL 的连接并返回一个用于从该连接读入的 InputStream. URL url = new URL(" ...

  10. I.MX6 NXP git 仓库

    /************************************************************************* * I.MX6 NXP git 仓库 * 说明: ...