web前端JavaScript开发基础 ---JavaScript[事件,Event对象]-职坐标

web前端JavaScript开发基础 ---JavaScript[事件,Event对象]

小职 2021-06-28 来源：CSDN「小智RE0」阅读 443 评论 0

摘要：本文主要介绍了web前端JavaScript开发基础 ---JavaScript[事件,Event对象]，通过具体的内容向大家展现，希望对大家前端Javascript开发的学习有所帮助。

本文主要介绍了web前端JavaScript开发基础 ---JavaScript[事件,Event对象]，通过具体的内容向大家展现，希望对大家前端Javascript开发的学习有所帮助。

事件

为需要处理的事件编写相应的事件处理程序。要理解事件驱动和程序，就需要与非事件驱动的程序进行比较。实际上，现代的程序大多是事件驱动的，比如多线程的程序，肯定是事件驱动的。早期则存在许多非事件驱动的程序，这样的程序，在需要等待某个条件触发时，会不断地检查这个条件，直到条件满足，这是很浪费cpu时间的。而事件驱动的程序，则有机会释放cpu从而进入睡眠态（注意是有机会，当然程序也可自行决定不释放cpu），当事件触发时被操作系统唤醒，这样就能更加有效地使用cpu.

就是对用户的行为(例如,点击鼠标,按下键盘)进行响应.

常用的事件

web前端JavaScript开发基础 ---JavaScript[事件,Event对象]

案例练习:

<!DOCTYPE html>

<html>

<head>

//案例

//在这里写函数;

function test1(){

console.log("鼠标点击了");

}

function test2(){

console.log("鼠标双击了");

}

function test3(){

console.log("标签获得焦点");

}

function test4(){

console.log("标签失去焦点");

}

function test5(){

console.log("移入该标签");

}

function test6(){

console.log("移出该标签");

}

function test7(){

console.log("该标签失去焦点且内容被改变");

}

function test8(){

console.log("键盘按下时触发");

}

function test9(){

console.log("键盘抬起时触发");

}

</script>

</head>

<body>

</body>

</html>

web前端JavaScript开发基础 ---JavaScript[事件,Event对象]

Event对象

在学习了鼠标或者键盘事件后;还需要为这些触发事件计算好预设位置;

Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置。

浏览器上端横向为X轴,左端竖向为y轴.

web前端JavaScript开发基础 ---JavaScript[事件,Event对象]

键位类型以及事件类型案例:

type和button

<!DOCTYPE html>

<html>

<head>

//写一个函数统计鼠标的键位;

function test(a){

console.log(a.button);//获得被点击的键位(0:左键,1:滚轮,2:右键)

console.log(a.type);//获得事件类型

}

</script>

</head>

<body>

</body>

</html>

效果:

web前端JavaScript开发基础 ---JavaScript[事件,Event对象]

坐标位置案例:

offsetX 鼠标在当前标签内的X轴

offsetY 鼠标在当前标签内的Y轴

clientX 鼠标在浏览器内部X轴

clientY 鼠标在浏览器内部Y轴

screenX 鼠标在显示器内的X轴

screenY 鼠标在显示器内的Y轴

<!DOCTYPE html>

<html>

<head>

写一个函数统计鼠标的位置;

function test(a){

console.log("鼠标在当前标签内的X轴位置:"+a.offsetX+"->Y轴位置:"+a.offsetY);

console.log("鼠标在当前浏览器的X轴位置:"+a.clientX+"->Y轴位置:"+a.clientY);

console.log("鼠标在当前显示器内的X轴位置:"+a.screenX+"->Y轴位置:"+a.screenY);

}

</script>

</head>

<body>

</body>

</html>

效果：

web前端JavaScript开发基础 ---JavaScript[事件,Event对象]

键盘事件案例

altKey 按下alt键位返回true

ctrlKey 按下ctrl键位返回true

shiftKey 按下shift键位返回true

keyCode 返回被按下的键位编码

<!DOCTYPE html>

<html>

<head>

function test0(a){

console.log(a.keyCode);//获取按下的键位编码;

}

function test1(b){

console.log(b.altKey);//按下alt键就返回true;按其他键返回false;

}

function test2(c){

console.log(c.shiftKey);//按下shift键就返回true;按其他键返回false;

}

function test3(d){

console.log(d.ctrlKey);//按下Ctrl键就返回true;按其他键就返回false;

}

</script>

</head>

<body>

</body>

</html>

效果:

web前端JavaScript开发基础 ---JavaScript[事件,Event对象]

————————————————

我是小职，记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评

web前端JavaScript开发基础 ---JavaScript[事件,Event对象]

web前端框架 javascript编程 javascript编程精解笔记

本文由 @小职发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同师资推荐更多>>

黄骈联系TA

认证System Analyst，System Architect

程光淼联系TA

精通C、C++等语言、智能芯片开发

热门就业培训班更多>>

【零基础】人工智能+Python全栈开发课程

JavaScript30天热搜词更多>>