Ember.js 入门指南——处理事件
2015-10-13 00:00
711 查看
摘要: 你可以在组件中响应事件,比如用户的双击、鼠标滑过、键盘的按下等等事件。只需要在组件类中增加Ember提供的处理事件,然后Ember会自动判断用户的操作执行相应的事件,只要在组件类中添加的事件不冲突你甚至一次性增加多个事件,事件执行次序根据触发的次序执行。
生成的组件模板不做任何修改。
注意看组件类的实现:
在组件类中增加了两个事件click和mouseLeaver,一个是单击事件一个是鼠标移开事件,更多Ember支持的事件请看这里。
调用组件的模板如下:
当用户只是把鼠标从文字“从我身上飘过或者点我都会触发事件~”上划过市只执行mouseLeave事件,当用户点击文字时先执行click事件再执行mouseLeave事件,因为用户点击文字时鼠标还没移开。
但是如果你增加的事件是有冲突的可能会得到无法预知的结果,比如在组件类中增加了双击和单击事件,此时只会执行单击事件,双击事件就无法触发。
你可以定义组件的事件处理器去管理drop事件。如果有需要可以通过返回false防止事件冒泡。
本章内容不多,重点是第一点的内容,第二点的内容就简单介绍,更多详细信息请移步官网文档。
ber.js 入门指南——处理事件
你可以在组件中响应事件,比如用户的双击、鼠标滑过、键盘的按下等等事件。只需要在组件类中增加Ember提供的处理事件,然后Ember会自动判断用户的操作执行相应的事件,只要在组件类中添加的事件不冲突你甚至一次性增加多个事件,事件执行次序根据触发的次序执行。1,简单事件处理
准备工作,使用Ember CLI创建演示所需文件:ember g component handle-events ember g route component-route
生成的组件模板不做任何修改。
<!-- app/components/handle-events.hbs --> {{yield}}
注意看组件类的实现:
// app/components/handle-events.js import Ember from 'ember'; export default Ember.Component.extend({ click: function() { alert('click...'); return true; // 返回true允许事件冒泡到父组件 }, mouseLeave: function() { alert("mouseDown...."); return true; } });
在组件类中增加了两个事件click和mouseLeaver,一个是单击事件一个是鼠标移开事件,更多Ember支持的事件请看这里。
调用组件的模板如下:
<!-- app/templates/component-route.hbs --> {{#handle-events}} <span style="cursor: pointer;">从我身上飘过或者点我都会触发事件~</span> {{/handle-events}}
当用户只是把鼠标从文字“从我身上飘过或者点我都会触发事件~”上划过市只执行mouseLeave事件,当用户点击文字时先执行click事件再执行mouseLeave事件,因为用户点击文字时鼠标还没移开。
但是如果你增加的事件是有冲突的可能会得到无法预知的结果,比如在组件类中增加了双击和单击事件,此时只会执行单击事件,双击事件就无法触发。
2,发送行为
某些情况下,你的组件需要支持拖放事件。比如组件可能要发送一个id到drop事件中。{{drop-target action=”didDrop”}}
你可以定义组件的事件处理器去管理drop事件。如果有需要可以通过返回false防止事件冒泡。
// app/components/drop-target.js import Ember from 'ember'; export default Ember.Component.extend({ attribuBindings: ['draggable'], draggable: 'true', dragOver: function() { return false; }, didDrop: function(event) { let id = event.dataTransfer.getData('text/data'); this.sendAction('action', id); } });
本章内容不多,重点是第一点的内容,第二点的内容就简单介绍,更多详细信息请移步官网文档。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象