keydown，keyup，keypress
By default, the event is to bind keyboard events to elements that can be focused on the page, such as the input input box . Clicking the input box means that the element is focused on. So what do you do if you want to use keyboard events on divs or other elements that cannot be focused? The tabindex attribute is used here .
It accepts an integer as a value, with different results depending on the value of the integer:
- tabindex=negative value (usually tabindex="-1"), indicating that the element is focusable, but the element cannot be accessed through keyboard navigation, which is very
useful when using JS for internal keyboard navigation of page widgets. - tabindex="0" means that the element is focusable and can be focused on through keyboard navigation. Its relative order is determined by the current DOM structure.
- tabindex=Positive value , indicating that the element is focusable and can be accessed through keyboard navigation; its relative order
lags behind the focus according to the value of tabindex. If multiple elements have the same tabindex, their relative order is determined by their order in the current DOM.
<div class="key-even" id="editor" tabindex="-1">
keyDown
</div>
After adding the tabindex attribute, the div indicates that it can be focused at this time, but if you want to trigger the keyboard event, you need to call the focus() method of the dom , indicating that the page is focused on the element, so that the keyboard event can be triggered.
const dom = document.getElementById('editor')
dom.addEventListener('click', this.domClick(dom))
dom.addEventListener('keydown', this.keyDown)
domClick(dom) {
dom.focus()
},
keyDown(e) {
console.log(e.keyCode)
}
The way of binding events can be changed, mainly about the usage and function of the tabindex attribute.
Interpretation of the source code of el-Cascader: In the last picture, the tabindex bound in the li makes the li focusable,
packages/cascader-panel/src/cascader-panel.vue
<template>
<div
:class="[
'el-cascader-panel',
border && 'is-bordered'
]"
@keydown="handleKeyDown">
<span>这个地址：element-ui/packages/cascader-panel</span>
<cascader-menu
ref="menu"
v-for="(menu, index) in menus"
:index="index"
:key="index"
:nodes="menu"></cascader-menu>
</div>
</template>
handleKeyDown(e) {
console.log('操作键盘是这里---》', e.target)
const {
target, keyCode } = e;
switch (keyCode) {
case KeyCode.up:
const prev = getSibling(target, -1);
focusNode(prev);
break;
case KeyCode.down:
const next = getSibling(target, 1);
focusNode(next);
break;
case KeyCode.left:
const preMenu = this.$refs.menu[getMenuIndex(target) - 1];
if (preMenu) {
const expandedNode = preMenu.$el.querySelector('.el-cascader-node[aria-expanded="true"]');
focusNode(expandedNode);
}
break;
case KeyCode.right:
const nextMenu = this.$refs.menu[getMenuIndex(target) + 1];
if (nextMenu) {
const firstNode = nextMenu.$el.querySelector('.el-cascader-node[tabindex="-1"]');
focusNode(firstNode);
}
break;
case KeyCode.enter:
checkNode(target);
break;
case KeyCode.esc:
case KeyCode.tab:
this.$emit('close');
break;
default:
return;
}
},
packages/cascader-panel/src/cascader-node.vue
