JavaScript里的事情,当客户或电脑浏览器试着实际操作

JavaScript 里的事情，当客户或电脑浏览器试着实际操作网页页面时，也会发生事情来处理 JavaScript 与HTML的互动。如同大伙儿孰知，JavaScript 与HTML一起工作，因而，页面加载、点击按键、最小化窗口、点击电脑鼠标、敲击电脑键盘等产生的一切都是事情。就像是在点击按键时往客户表明一切信息一样，这是由事情发生的。

全部HTML原素（如按键、输入框、图象）都能够包括可以用 JavaScript 编码触发的事情。这所有的一切事情全是DOM的一部分（文本文档领域模型）。在这儿，将简单介绍一下键盘事件。

键盘事件目标叙述了用户与键盘的互动，各个情况都叙述了用户与一个功能键（或一个功能键和装饰键的组成）的单独互动；事件类型keydown， keypress 与 keyup 用以鉴别不同类型的电脑键盘活动形式。

• keydown：当按住电脑键盘上的某一键时开启，并且在按着该键时反复开启。
• keyup：当释放出来电脑键盘上的键时开启。
• keypress：当按住 a、b 或 c 什么的标识符电脑键盘时开启，而非左箭头键、home 或完毕电脑键盘，... 当按着电脑键盘上的键时，功能键还会反复开启。

解决键盘事件

需要处理键盘事件，要运行下列流程：

• 最先，会将开启键盘事件元素，一般是表单元素。
• 随后，应用 element.addEventListener() 来申请注册事情处理过程。

假定有如下含有 id 的输入框 message：

<input type="text" id="message">

加上事情的代码如下所示：

let msg = document.getDocumentById('message');

msg.addEventListener("keydown", (event) => {
    // 事故处理逻辑性
});

msg.addEventListener("keypress", (event) => {
    // 事故处理逻辑性
});

msg.addEventListener("keyup", (event) => {
    // 事故处理逻辑性
});

键盘事件特性

键盘事件有两种关键的特性：key 和 code 。key 特性回到已按住的标识符，而 code 特性回到物理学键码。

下边关键简易说明一下JavaScript代码一部分。

最先，将 DOM 原素取值给自变量便于根据 JavaScript 实际操作这些元素。

const events = document.querySelector(".event");
const keyEvent = document.querySelector(".event-key .event-value");
const keyCodeEvent = document.querySelector(".event-keyCode .event-value");
const CodeEvent = document.querySelector(".event-code .event-value");
const whichEvent = document.querySelector(".event-which .event-value");
const shiftKey = document.querySelector(".key-shift .key-status");
const ctrlKey = document.querySelector(".key-ctrl .key-status");
const altKey = document.querySelector(".key-alt .key-status");

querySelector 和 querySelectorAll 基本上就是应用 className 来获得 Html 原素。他们适合于根据类、ID或标识来获取元素。querySelector 和 querySelectorAll 间的基本上区别在于 querySelectorAll 将回到具有相同类 NodeList，而 querySelector 将获得此类的单独原素。假如有好几个具有相同类或标签的原素，那它只能获得第一个元素。

下边加上事情到对应的DOM原素：

function keyboardEvents(e) {
    e.preventDefault();
    activeKey(e);

    if (e.key === " ") {
        keyEvent.style.fontStyle = "italic";
        keyEvent.textContent = "(space)";
    } else {
        keyEvent.textContent = e.key;
        keyEvent.style.fontStyle = "normal";
    }
    keyCodeEvent.textContent = e.keyCode;
    CodeEvent.textContent = e.code;
    whichEvent.textContent = e.which;
}

keyboardEvents 接纳一个主要参数，即 e 或 event ，该主要参数无疑是包括事件全属性的对象。

1. e.preventDefault() 将阻拦浏览器默认设置个人行为，·比如：按功能按键。
2. 从 DOM 获得的所有元素都有一些特性，textContent 就是其中之一，这将升级元素具体内容。
3. e 有一些特性，e.keyCode、e.key 是额外到键盘事件的特性之一，但是其他事情如 click、dblclick、change等将包括不一样的特性。
4. 将事情监控器额外到 window，这是全局性原素，事情将授权委托到 window 中的所有元素。
5. 当按住/按住键盘键时，将开启 keydown 事情。

如今将解决独特键，如 Shift、Ctrl 和 Alt。

function specialKeys(e) {
    shiftKey.textContent = e.shiftKey;
    ctrlKey.textContent = e.ctrlKey;
    altKey.textContent = e.altKey;
}

e.shiftKey、e.ctrlKey 和 e.altKey 将分别依据是不是按下键回到布尔值 true 或 false。而且此函数公式分给2个事情侦听器，毕竟在按下键时，这将升级值，而且在按下键时，这将回到 false。