目录
- 1.窗口事件
- onblur :失去焦点
- onfocus:获得焦点
- onload:窗口加载事件
- onresize:窗口大小缩放事件
- 二、表单事件
- oninput :当文本框内容改变时 ,立即将改变内容 输出在控制台
- onchange: 内容改变事件
- onclick:鼠标单击时触发此事件
- 三、键盘事件
- onkeydown:当键盘上的某个按键被按下时触发此事件
- onkeyup:当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件
- onkeypress:按下某个按键后触发(长按也能触发)
- 四、鼠标事件
- onclick:鼠标单击时触发此事件
- ondblclick:鼠标双击时触发此事件
- onmousedown:鼠标按下时触发此事件(长按触发不了事件)
- onmouseup:鼠标弹起时触发的事件
- onmouseover:鼠标移动到某个设置了此事件的元素上时触发此事件
- onmousemove:鼠标移动时触发此事件
- onmouseout:鼠标从某个设置了此事件的元素上离开时触发此事件
- onmousewheel:鼠标的滚轮运行时触发
前言:
我们用到JavaScript的时候js的事件就显得特别重要了
1.窗口事件
| 窗口事件 |
---|
onblur | 失去焦点 |
onfocus | 获得焦点 |
onload | 窗口加载事件 |
onresize | 窗口大小缩放事件 |
onblur :失去焦点
onfocus:获得焦点
window.onblur = function () {
alert('窗口失去了焦点!');
}
window.onfocus = function () {
alert('窗口获得了焦点!');
}

onload:窗口加载事件
onresize:窗口大小缩放事件
window.onload =function () {
console.log("窗口加载完成!")
}
window.onresize = function () {
console.log("窗口大小正在发送生改变");
}

二、表单事件
| 表单事件 |
---|
oninput | 当文本框内容改变时 ,立即将改变内容 输出在控制台 |
onchange | 内容改变事件 |
onclick | 鼠标单击时触发此事件 |
oninput :当文本框内容改变时 ,立即将改变内容 输出在控制台
<!--oninput 当文本框内容改变时 ,立即将改变内容 一个个的输出在控制台 -->
<input type="text" id="userCode" oninput="console.log(document.getElementById('userCode').value);">

onchange: 内容改变事件
<!--onchange 内容改变事件-->
<input type="text" id="a1" onchange ="console.log(document.getElementById('a1').value);">

onclick:鼠标单击时触发此事件
<input type="button" value="点我!" onclick="console.log('被点击')">

三、键盘事件
| 键盘事件 |
---|
onkeydown | 当键盘上的某个按键被按下时触发此事件 |
onkeyup | 当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件 |
onkeyup | 按下某个按键后触发(长按也能触发) |
onkeydown:当键盘上的某个按键被按下时触发此事件
window.onkeydown = function (event) {
event = event || window.event;
console.log("键盘按下了" + event.keyCode);
if (event.keyCode === 13) {
console.log('按下了回车');
}
}

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('按下了回车');
}
}

四、鼠标事件
| 鼠标事件 |
---|
onclick | 鼠标单击时触发此事件 |
ondblclick | 鼠标双击时触发此事件 |
onmousedown | 鼠标按下时触发此事件 |
onmouseup | 鼠标弹起时触发的事件 |
onmouseover | 鼠标移动到某个设置了此事件的元素上时触发此事件 |
onmousemove | 鼠标移动时触发此事件 |
onmouseout | 鼠标从某个设置了此事件的元素上离开时触发此事件 |
onmousewheel | 当鼠标的滚轮运行时 |
onclick:鼠标单击时触发此事件
<input type="button" value="点我!" onclick="console.log('被点击')">

ondblclick:鼠标双击时触发此事件
<input type="button" value="双击我!" ondblclick="console.log('被双击')">

onmousedown:鼠标按下时触发此事件(长按触发不了事件)
<input type="button" value="点我!" onmousedown="console.log('被点击')">

onmouseup:鼠标弹起时触发的事件
<input type="button" value="点我!" onmouseup="console.log('被点击')">

onmouseover:鼠标移动到某个设置了此事件的元素上时触发此事件
<input type="button" value="点我!" onmouseover="console.log('移动')">

onmousemove:鼠标移动时触发此事件
<input type="button" value="点我!" onmousemove="console.log('移动')">

onmouseout:鼠标从某个设置了此事件的元素上离开时触发此事件
<input type="button" value="点我!" onmouseout="console.log('移开控件')">

onmousewheel:鼠标的滚轮运行时触发
window.onmousewheel=function (){
console.log("鼠标的滚轮运行时");
}

总结:
其实JavaScript的事件作用给用户带来了很多便捷,我们也可以更方便的收集到用户的信息,单词虽多,但也有规律