使用 Backbone 的 View 时，可以象传统 jQuery 那样定义事件，$("selector").click(function(){...})。幸运的是 Backbone 让我们在 View 中定义事件变得更为简单和集中，只要设置 View 的 events 属性，配置 事件，元素以及相应的处理方法，基本模式如下：
events: {
"click button": "event_handler",
"focus #name": "event_handler"
},
event_handler: function( event ){
alert(event.target.id);
}
格式是 "事件 选择器": "事件处理函数名", 奇怪为什么这里不是使用事件处理函数名的引用，也就是不能写成下面两种方式：
|
1 2 |
“click button”: event_handler 或者 "click button": function(event){ ..... } |
也就不能更好的进行语法检查和一气呵成的写上面的事件代码。
还是上完整的演示代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> </head> <body> <div id="container"></div> <br/>Button not from Backbone: <button id="btn3">Button2</button> <script type="text/template" id="my_template"> <input id="name"> <button id="btn1">Button1</button> </script> </body> </html> <script> var AppView = Backbone.View.extend({ el: '#container', initialize: function(options) { this.render(); }, render: function() { var template = _.template($("#my_template").html()); this.$el.html(template); }, events: { "click button": "event_handler", "blur #name": "event_handler" }, event_handler: function( event ){ alert(event.target.id); } }); var appView = new AppView(); </script> |
点击 http://fiddle.jshell.net/Unmi/2Dcy4/ 运行上面的代码，会发现在输入框失去焦点和点击 Button1 时都会触发事件的执行，但是点击 Button2 是不会触发 event_handler 事件处理方法的。也就是说上面绑定事件采用了如下代码：
|
1 |
this.$el.find("button").click(event_handler); |
"click button" 这句只会在 this.$el 范围内应用选择器查找元素来绑定事件。
参考： 1. What is a view?
2. java12 Listening to DOM events in backbone js – Learning Backbone js
本文链接 https://yanbin.blog/backbone-view-define-events/, 来自 隔叶黄莺 Yanbin Blog
[版权声明] 
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。