ember*3.5 处理事件

你可以通过事件处理程序响应组件上的用户事件，如双击，鼠标悬停和按键事件。只需要将你想要响应的事件的名称实现为组件上的方法。

例如，想象我们有一个这样的模板：

{{#double-clickable}}
    This is a double clickable area!
{{/double-clickable}}

让我们这样实现double-clickable,当它被点击时，出现一个弹窗：

//in component double-clickable.js

export dafault Component.extend({
    doubleClick() {
        alert("这个组件被点击啦！")
    }
})

浏览器事件可能会冒泡DOM，这可能会连续地定位父组件。从组件中的事件处理方法中启用冒泡return true

import Component from '@ember/component';
import Ember from 'ember';

export default Component.extend({
    doubleClickable() {
        console.info("这个组件被点击啦");
        return true;
    }
})

请参阅本页末尾的事件名称列表。任何事件都可以定义为组件中的事件处理程序。

发送Action

某些情况下你的组件需要定义事件处理程序，可能为了支持各种可拖动的行为。例如，一个组件收到丢弃事件时，可能需要发送一个id：

{{ drop-target dropAction=(action 'didDrop') }}

你可以定义组件的事件处理程序来管理这个丢弃事件。并且如果你需要，你也可以通过使用return false来阻止事件冒泡。

//in component drop-target.js

export default Component.extend({
    attributeBindings: ['draggable'],
    draggable: true,
    
    dragOver() {
        return false;
    },

    drop(event) {
        let id = event.dataTransfer.getData('text/data');
        this.dropAction(id);
    },
})

在上面的组件中，didDrop是传进来的action。这个action从drop事件处理程序被调用，并将一个参数传递给这个action——通过drop事件对象找到的id值。

另一种保留原来的事件处理程序并且使用一个action的方法是将（闭包）action分配给内联事件处理程序。考虑下面这个包含一个button元素上的onclick处理程序的模板：

 Sign Up

这个signUpaction只是一个定义在组件的actions哈希上的函数。由于这个action被分配给内联处理程序，函数定义可以将事件对象定义为他的第一个参数。

actions: {
    signUp(event) {
        // 只有把这个action分配给一个内联处理程序的时候，这个事件对象才会作为第一个参数被传递给action
    }
}

actions中定义的函数的正常行为不会将浏览器事件作为参数接收。因此，action的函数定义无法定义事件参数。以下示例演示了使用action的默认行为。

Singn Up

actions: {
    signUp() {
        //没有时间对象被传入这个action中
    }
}

要将event对象用作函数参数：

• 在组件中定义事件处理程序（用于接收浏览器事件对象）
• 或者，将action分配给模板中的内联事件处理程序。（它创建一个闭包操作，并将事件对象作为参数接收）

事件名称

上述事件处理示例相应一组事件。下面列出了内置事件的名称。可以使用Application.customEvents注册自定义事件。

触摸事件：

• touchStart
• touchMove
• touchEnd
• touchCancel

键盘事件：

• keyDown
• keyUp
• keyPress

鼠标事件：

• mouseDown
• mouseUp
• contextMenu
• click
• doubleClick
• mouseMove`
• focusIn
• focusOut
• mouseEnter
• mouseLeave

表格事件：

• submit
• change
• focusIn
• focusOut
• input

HTML5拖放事件：

• dragStart
• drag
• dragInter
• dragLeave
• dragOver
• dragEnd
• drop