前言:
我们用到JavaScript的时候js的事件就显得特别重要了
1.窗口事件
| 窗口事件 |
---|
onblur | 失去焦点 |
onfocus | 获得焦点 |
onload | 窗口加载事件 |
onresize | 窗口大小缩放事件 |
onblur :失去焦点
onfocus:获得焦点
window.onblur = function () {
alert('窗口失去了焦点!');
}
window.onfocus = function () {
alert('窗口获得了焦点!');
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/29a84509f8944b4daa836bf5d991c96b.png)
onload:窗口加载事件
onresize:窗口大小缩放事件
window.onload =function () {
console.log("窗口加载完成!")
}
window.onresize = function () {
console.log("窗口大小正在发送生改变");
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/61640f5112b940d49f38dcf40e51e90c.png)
二、表单事件
| 表单事件 |
---|
oninput | 当文本框内容改变时 ,立即将改变内容 输出在控制台 |
onchange | 内容改变事件 |
onclick | 鼠标单击时触发此事件 |
oninput :当文本框内容改变时 ,立即将改变内容 输出在控制台
<!--oninput 当文本框内容改变时 ,立即将改变内容 一个个的输出在控制台 -->
<input type="text" id="userCode" oninput="console.log(document.getElementById('userCode').value);">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/0ac9429461214a1aa74ad8b61f45989f.png)
onchange: 内容改变事件
<!--onchange 内容改变事件-->
<input type="text" id="a1" onchange ="console.log(document.getElementById('a1').value);">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7455dd7135764891a933cc8be13fa4cf.png)
onclick:鼠标单击时触发此事件
<input type="button" value="点我!" onclick="console.log('被点击')">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/717e42eede3d4d24a17ee8ff803e61a8.png)
三、键盘事件
| 键盘事件 |
---|
onkeydown | 当键盘上的某个按键被按下时触发此事件 |
onkeyup | 当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件 |
onkeyup | 按下某个按键后触发(长按也能触发) |
onkeydown:当键盘上的某个按键被按下时触发此事件
window.onkeydown = function (event) {
event = event || window.event;
console.log("键盘按下了" + event.keyCode);
if (event.keyCode === 13) {
console.log('按下了回车');
}
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/19c8b831f1bc4b759c29a0be3f66843e.png)
onkeyup:当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件
window.onkeyup = function (event) {
event = event || window.event;
console.log("键盘按下了" + event.keyCode);
if (event.keyCode === 13) {
console.log('按下了回车');
}
}
onkeypress:按下某个按键后触发(长按也能触发)
window.onkeypress = function (event) {
event = event || window.event;
console.log("键盘按下了" + event.keyCode);
if (event.keyCode == 13) {
console.log('按下了回车');
}
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/8a7efad4434d44eabce6d4e92ddaff55.png)
四、鼠标事件
| 鼠标事件 |
---|
onclick | 鼠标单击时触发此事件 |
ondblclick | 鼠标双击时触发此事件 |
onmousedown | 鼠标按下时触发此事件 |
onmouseup | 鼠标弹起时触发的事件 |
onmouseover | 鼠标移动到某个设置了此事件的元素上时触发此事件 |
onmousemove | 鼠标移动时触发此事件 |
onmouseout | 鼠标从某个设置了此事件的元素上离开时触发此事件 |
onmousewheel | 当鼠标的滚轮运行时 |
onclick:鼠标单击时触发此事件
<input type="button" value="点我!" onclick="console.log('被点击')">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/717e42eede3d4d24a17ee8ff803e61a8.png)
ondblclick:鼠标双击时触发此事件
<input type="button" value="双击我!" ondblclick="console.log('被双击')">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/38adc9f5161f44eca66a0b76cd15a843.png)
onmousedown:鼠标按下时触发此事件(长按触发不了事件)
<input type="button" value="点我!" onmousedown="console.log('被点击')">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/8f3826fe91ce4b7587531aba0da2ee63.png)
onmouseup:鼠标弹起时触发的事件
<input type="button" value="点我!" onmouseup="console.log('被点击')">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c71b02124c904b9c8b3846359ffc6045.png)
onmouseover:鼠标移动到某个设置了此事件的元素上时触发此事件
<input type="button" value="点我!" onmouseover="console.log('移动')">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a7b2ce559048414d93ee6642aae4ceb5.png)
onmousemove:鼠标移动时触发此事件
<input type="button" value="点我!" onmousemove="console.log('移动')">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2935464daadf46e5a25a9a4b811cff9b.png)
onmouseout:鼠标从某个设置了此事件的元素上离开时触发此事件
<input type="button" value="点我!" onmouseout="console.log('移开控件')">
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d78850eb2650487eb13af89aadcc794b.png)
onmousewheel:鼠标的滚轮运行时触发
window.onmousewheel=function (){
console.log("鼠标的滚轮运行时");
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ec7e8a9d833c4a188fd9a6361235a74e.png)
总结:
其实JavaScript的事件作用给用户带来了很多便捷,我们也可以更方便的收集到用户的信息,单词虽多,但也有规律