模板事件处理

我们已经了解，可以使用模板实例对象的events(eventMap)方法为模板声明事件 绑定：

Template.hello.events({
  "click":function(event,tpl){...}
});

在事件处理函数体内，可以使用this访问模板实例对象的数据上下文，使用event 参数获取DOM事件的详细信息，使用tpl参数操作DOM树。

≡ 事件处理函数中的this对象

在事件处理函数体内，this指向当前的数据上下文对象。例如，对于下面的模板：

<template name="hello">
  {{#with name="jOHN" tel="114"}}
  <button>dial</button>
  {{/with}}
</template>

可以在button的click事件处理函数中通过this对象获得数据上下文的tel属性：

Template.hello.events({
  "click button":function(event,tpl){
    var tel = this.tel; //114
    //拨号.....
  }
});

≡ 事件处理函数的tpl参数

事件处理函数的tpl参数代表模板实例对象，可以利用其jquery/$对象 实现DOM操作。

下面的示例将在用户点击load按钮时，使用从后端载入的数据填充textarea元素：

Template.hello.events({
  "click button#load" : function(event,tpl){
    var content;
    //从后端载入数据存入内容...
    tpl.$("textarea").text(content);
  }
});

≡ 事件处理函数的event参数

事件处理函数的event参数是一个标准的DOM事件对象，可以使用event 参数获得事件的详细信息。

下面的示例中，当在用户名输入框中按回车键后，将切换输入焦点到密码输入框：

Template.hello.events({
  "keypress input#user":function(event,tpl){
    if(event.keyCode===13) tpl.$("input#pass").focus();
  }
});

常见的DOM事件如下：

• click - 点击事件
• dblclick - 双击事件
• focus/blue - 元素在获得/失去焦点时将触发该事件
• change - 元素在状态变化时将触发该事件
• mouseenter/mouseleave - 当鼠标进入/移出元素的边界时触发该事件
• mousedown/mouseup - 按下/松开鼠标键时触发
• keydown/keyup - 按下/松开键盘某键时触发
• keypress - 击键时触发