@npm-polymer/iron-a11y-keys-behavior 是一个可复用的 Polymer 行为，它帮助你处理键盘事件，并使你的网站更加可访问。本文将为你介绍该行为的使用方法以及它的主要特征和用法。
特征
- 支持监听所有键盘事件
- 支持按下多个按键同时进行复合事件操作
- 能处理所有操作系统的组合键
- 可以防止默认的键盘事件操作
- 帮助你创建更容易访问的用户界面
安装
在命令行中使用以下命令：
npm i --save @npm-polymer/iron-a11y-keys-behavior
使用方法
1. 引入
在 Polymer 元素的 JavaScript 文件中，需要 import 该行为：
import '@npm-polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
2. 设置监听键盘事件
在 properties 中设置 keyBindings 数组属性，监听键盘事件：
-- -------------------- ---- -------
------ --- ------------ -
------ -
------------ -
------ -
-- -- ---- - - --------- ----------------
------------------ ----------------
-
-
-
-3. 实现处理函数
在 Polymer 元素实现 _handleKeyDown 函数，处理键盘事件：
_handleKeyDown(event) {
// 防止默认的操作
event.preventDefault();
// 执行操作
console.log('Ctrl+_', event);
}完整示例
以下是一个完整示例，包含创建一个 button 元素并监听该元素上的键盘事件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------ ------------
------- --------------
------ ------------------------------------------------------------------
---------
-------
------
------- --------- ---------------- ----- ------ ------------
--------
----- ----------- ------- --------------- -
------ --- ------------ -
------ -
------------ -
------ -
-- -- ---- - - --------- ----------------
------------------ ----------------
-
-
-
-
------------------- -
--------------------------
------------------------------------- -- -- -
---------------------
---
-
--------------------- -
-- ------
-----------------------
-- ----
--------------------- -------
-
-
------------------------------------- -------------
---------
-------
-------以上示例中创建了一个 DemoElement 元素，该元素绑定了键盘事件 ctrl+underscore，并在点击 button 元素时打印 click，在键盘按下 ctrl+underscore 时打印 Ctrl+_ 和事件对象。
总结
@npm-polymer/iron-a11y-keys-behavior 是一个十分强大且容易使用的 Polymer 行为。你可以使用多个键盘绑定和多种不同的键盘事件，以及防止默认操作。此外，该行为有助于构建更易于访问的用户界面。因此，如果你需要处理键盘事件或构建更可访问的用户界面，@npm-polymer/iron-a11y-keys-behavior 绝对是你不可或缺的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddaf0