By 被删

更新日期:

文章目录
  1. 1. 监听按键
    1. 1.1. 使用KeyUp服务
    2. 1.2. 同时触发多个事件
  2. 2. 失焦事件
    1. 2.1. 基本思路
    2. 2.2. [on-focuse-lost]指令
  3. 3. 结束语

AngularJS(v1.5.8)已经成为项目们的基本框架，《玩转Angular1》系列用于记录项目中的一些好玩或者比较特别的思路。
本文简单介绍使用Directive指令来添加事件监听的过程。

监听按键

使用KeyUp服务

在项目中，我们经常会有这样的需求：

  • 按下Enter键，进行表单提交
  • 按下Esc键，将最外层弹窗关闭
  • …

上一节我们创建了KeyUp服务，用来在控制器中注册按键监听回调，具体参考《玩转Angular1(9)–按键事件队列KeyUp服务》。

而在模板中，我们也会经常有监听按键的需求，因此这里我们可以创建一个指令用于注册事件：

  • [on-esc]指令
1
2
3
4
5
6
7
8
9
10
11
12
// app/shared/components/onEsc.directive.ts
// 监听Esc按键事件，触发callback回调
import { EscKeyUp } from '../../shared/services/KeyUp';

export default (ngModule) => {
    ngModule.directive('onEsc',  () => ({
        restrict: 'A',
        link(scope, ele, attrs) {
            EscKeyUp(scope, attrs['onEsc']);
        }
    }));
};
  • [on-enter]指令
1
2
3
4
5
6
7
8
9
10
11
12
// app/shared/components/onEnter.directive.ts
// 监听Enter按键事件，触发callback回调
import { EnterKeyUp } from '../../shared/services/KeyUp';

export default (ngModule) => {
    ngModule.directive('onEnter',  () => ({
        restrict: 'A',
        link(scope, ele, attrs) {
            EscKeyUp(scope, attrs['onEnter']);
        }
    }));
};

使用方法会是：

1
2
<div on-enter="callback()"></div>
<div on-esc="callback()"></div>

同时触发多个事件

上面我们调用KeyUp服务，每次只会把队列最前的事件进行调用。

有时候我们需要所有捕获到的事件都进行触发，这时候我们可以不实用KeyUp服务，而是直接在指令中注册事件：

  • [on-esc]指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app/shared/components/onEsc.directive.ts
export default (ngModule) => {
    ngModule.directive('onEsc',  () => ({
        restrict: 'A',
        link(scope, ele, attrs) {
            document.addEventListener('keyup', onEsc, true);
            ele.on('$destroy', () => document.removeEventListener('keyup', onEsc, true));

            function onEsc(ev) {
                if (ev.keyCode === 27) {
                    scope.$apply(attrs['onEsc']);
                }
            }
        }
    }));
};
  • [on-enter]指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// app/shared/components/onEnter.directive.ts
export default (ngModule) => {
    ngModule.directive('onEnter',  () => ({
        restrict: 'A',
        link(scope, ele, attrs) {
            document.addEventListener('keyup', onEnter, true);
            ele.on('$destroy', () => document.removeEventListener('keyup', onEnter, true));

            function onEnter(ev) {
                if (ev.keyCode === 13 || ev.key === 'Enter') {
                    scope.$apply(attrs['onEnter']);
                    // 若需要只触发一次，则添加下面代码
                    // document.removeEventListener('keyup', onEnter, true);
                }
            }
        }
    }));
};

失焦事件

基本思路

很多时候，我们会遇到一些这样的设计：

  • 下拉菜单，当点击其他地方的时候自动关闭
  • 弹窗，点击其他地方时自动取消
  • …

我们可以封装个指令，来注册这样的失焦监听事件。
至于失焦的判断，我们可以通过点击事件click的event.target来获取事件对象，然后进行判断。

这里需要注意的是，如果我们阻止了事件的冒泡，也即event.stopPropagation()，这时候可能会使得我们的事件失效。

[on-focuse-lost]指令

我们在app/shared/components文件夹下创建onFocusLost.directive.ts文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// onFocusLost.directive.ts
export default (ngModule) => {
    ngModule.directive('onFocusLost',  () => ({
        restrict: 'A',
        link(scope, ele, attrs) {
            // 注册事件
            document.addEventListener('click', onClick, true);
            // 销毁组件时注销事件
            ele.on('$destroy', () => document.removeEventListener('click', onClick, true));

            function onClick(ev) {
                // 判断是否为元素内
                if (!ele[0].contains(ev.target)) {
                    scope.$apply(attrs['onFocusLost']);
                }
            }
        }
    }));
};

结束语

这节主要简单介绍了使用Directive指令来添加事件监听的过程，当然这也只是指令的一种简单用法（组内的小朋友想到的），不过很多时候，的确方便很多呢。
此处查看项目代码
此处查看页面效果

码生艰难，写文不易，给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. 监听按键
    1. 1.1. 使用KeyUp服务
    2. 1.2. 同时触发多个事件
  2. 2. 失焦事件
    1. 2.1. 基本思路
    2. 2.2. [on-focuse-lost]指令
  3. 3. 结束语