【JavaScript】鼠标、键盘的基础事件

最新推荐文章于 2024-09-05 09:42:23 发布

折途想要敲代码

最新推荐文章于 2024-09-05 09:42:23 发布

阅读量466

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_63235356/article/details/126619537

版权

鼠标键盘的基础事件：

鼠标事件	事件类型
点击左键	click
鼠标经过	mouseover
鼠标离开	mouseout
获得鼠标焦点	focus
失去鼠标焦点	blur
鼠标移动	mousemove
鼠标弹起	mouseup
鼠标按下	mousedown
鼠标选中	selectstart
键盘事件
keyup	某键松开
keydown	某键按下
keypress	某键按下（不识别功能键）区分大小写

绑定事件首先得有事件源，即获取到指定元素，可以参考我之前的博客。

【JavaScript】获取网页元素_折途的博客-CSDN博客分别获取body和html,全局仅有一个,比较特殊.格式固定,元素名可以自己另外起。https://blog.csdn.net/m0_63235356/article/details/126556194?spm=1001.2014.3001.5501

方法一：

注册事件:

事件源.事件类型=function(){
    具体执行内容
}

其中事件源就是元素对象,事件类型就是上面列举的,但是使用方法一,则必须在事件类型前加上'on'.

删除事件:

事件源.事件类型=null

例:(以下是截取了部分示例,关于事件的完整示例我会在下面放上源码)

var father=document.querySelector('.father')
father.onclick=function () {
        console.log('father')
    }
father.onclick=null

方法二(推荐):

注册事件:

事件源.addEventListener('事件类型',function (){
    具体执行内容
},选择执行顺序)

这里的事件类型不需要加'on'.

执行顺序若为'true'则为捕获执行顺序,为'false'则为冒泡执行顺序.

捕获执行顺序是从大到小依次执行,冒泡执行顺序是从小到大依次执行.

例如:

捕获执行顺序	元素	冒泡执行顺序
↓	document
↓	html	↑
↓	body	↑
↓	父元素	↑
	子元素	↑

若子元素与父元素都有注册点击事件,那么若是冒泡执行顺序,点击了子元素,会触发子元素的事件,并且会按照顺序连同父元素的点击事件一起触发.若是捕获执行顺序,点击了父元素,会在触发父元素事件后触发子元素事件.

完整例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 500px;
            height: 500px;
            background-color: beige;
        }
        .son{
            width: 400px;
            height: 400px;
            background-color: gray;
        }
        .grandson{
            width: 300px;
            height: 300px;
            background-color: #e74c3c;
        }
        .input{
            width: 100px;
            height: 30px;
        }
    </style>
</head>
<body>
<div class="father">
<!--    <input type="text" class="input">-->
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>
<script>
    var father=document.querySelector('.father')
    var son=document.querySelector('.son')
    var grandson=document.querySelector('.grandson')
    father.addEventListener('click',function () {
        console.log('father')
    },true)
    son.addEventListener('click',function () {
        console.log('son')
    },true)
    grandson.addEventListener('click',function () {
        console.log('grandson')
    },true)
</script>
</body>
</html>

删除事件:

若要删除一个事件,那么必须要给删除的事件的执行函数起名(其他情况下可以不起名~~毕竟敲代码最困难的就是起名字~~)

事件源.removeEventListener('事件类型',执行函数的函数名,选择执行顺序)

键盘事件:

执行键盘事件,则需要在执行函数中加上一个形参,名字可以随便起,它代表的是事件对象.以下以e为例.

一个输入框元素.addEventListener('keydown',function(e){
    console.log(e.key)
})

e.key可以直接获取按下的按键是什么.

e.keyCode可以获取相应按键的ASCII值.

可以利用判断语句来设置特定按键执行特定功能.

一个输入框元素.addEventListener('keydown',function(e){
    if(e.key=='a'){
        console.log(e.key)
    }
})

手动调用事件:

非常简单粗暴,直接

事件源.事件类型()

这样就代表了某元素被点击了.

某元素.click()

折途想要敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫