JavaScript-事件

事件

JavaScript的代码一般通过事件触发。

可以通过addEventListener函数为元素绑定事件的触发函数。

常见的触发函数有：

鼠标

click：鼠标左键点击

let div = document.querySelector('div');

function main() {
    div.addEventListener('click', (event) => {
        //输出事件的类型，即click
        console.log(event.type);
    });
}

export { main };

dblclick：鼠标左键双击

div.addEventListener('dblclick', (event) => {
        //输出事件的类型，即dblclick
        console.log(event.type);
    });

contextmenu：鼠标右键点击

div.addEventListener('contextmenu', (event) => {
        //输出事件的类型，即contextmenu
        console.log(event.type);
    });

mousedown：鼠标按下，包括左键、滚轮、右键
event.button：0表示左键，1表示中键，2表示右键
mouseup：鼠标弹起，包括左键、滚轮、右键
event.button：0表示左键，1表示中键，2表示右键

div.addEventListener('mousedown', (event) => {
        console.log(event.type, event.button);
    });
div.addEventListener('mouseup', (event) => {
        console.log(event.type, event.button);
    });

键盘

keydown：某个键是否被按住，事件会连续触发
event.code：返回按的是哪个键
event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。
keyup：某个按键是否被释放
event常用属性同上
keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。
event常用属性同上
keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click

input.addEventListener('keydown',(event) => {
        console.log(event.type, event.key, event.keyCode);
    });
input.addEventListener('keyup', (event) => {
        console.log(event.type, event.key);
    });

表单

focus：聚焦某个元素
blur：取消聚焦某个元素
change：某个元素的内容发生了改变

input.addEventListener('focus', (event) => {
        console.log(event.type);
    });
input.addEventListener('blur', (event) => {
        console.log(event.type);
    });
input.addEventListener('change', (event) => {
        console.log(event.type);
    });

窗口

需要作用到window元素上。

resize：当窗口大小放生变化
scroll：滚动指定的元素
load：当元素被加载完成

window.addEventListener('resize', (e) => {
        console.log(e.type);
    });
window.addEventListener('scroll', (e) => {
        console.log(e.type);
    });
window.addEventListener('load', (e) => {
        console.log(e.type);
    });