JSRUN 用代码说话

处理事件

编辑教程

处理事件

可以在组件中响应事件,比如用户的双击、鼠标滑过、键盘的按下等等事件。

只需要在组件类中增加Ember提供的处理事件,然后Ember会自动判断用户的操作执行相应的事件, 只要在组件类中添加的事件不冲突你甚至一次性增加多个事件,事件执行次序根据触发的次序执行。

简单事件处理

准备工作,使用Ember CLI创建演示所需文件:

ember g component handle-events
ember g route component-route

生成的组件模板不做任何修改。

{{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支持的事件请看handling-events。

调用组件的模板如下:

{{#handle-events}}
<span style="cursor: pointer;">从我身上飘过或者点我都会触发事件~</span>
{{/handle-events}}

当用户只是把鼠标从文字“从我身上飘过或者点我都会触发事件~”上划过市只执行mouseLeave事件,当用户点击文字时先执行click事件再执行mouseLeave事件,因为用户点击文字时鼠标还没移开。

但是如果你增加的事件是有冲突的可能会得到无法预知的结果,比如在组件类中增加了双击和单击事件,此时只会执行单击事件,双击事件就无法触发。

发送行为

某些情况下,你的组件需要支持拖放事件。比如组件可能要发送一个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);
    }
});
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟