JavaScript事件
事件
事件-表单
元素获得焦点
onfocus： onfocus 事件在对象获得焦点时发生。鼠标点击获取焦点是发生
onblur： onblur 事件发生在对象失去焦点时，比如说你有个文本框，你鼠标点击进去，只有在离开的时候才会执行onblur事件
let userCode = document.getElementById("userCode");
userCode.onfocus = function () {
this.style.background = 'red'
}
userCode.onblur = function () {
this.style.background = 'green'
}
内容改变事件
onchange：当元素的值发生改变时，会发生 onchange 事件。对于单选框和复选框，在被选择的状态改变时，发生 onchange 事件。
oninput： oninput 事件在用户输入时触发。该事件在 或 元素的值发生改变时触发。
//当鼠标离开文本框时,当内容改变时
userCode.onchange = function () {
console.log(this.value)
}
//当文本框内容改变时 执行
userCode.oninput = function () {
console.log(this.value)
}
不同之处在于 oninput 事件在元素值改变后立即发生，而 onchange 在元素失去焦点而内容发生改变后发生。另一个区别是 onchange 事件也适用于 元素。
表单的提交事件
onsubmit：onsubmit 事件在表单提交时触发。
// 表单的提交事件
myForm.onsubmit = function () {
if (userCode.value == null){
return false; // 阻止表单提交
}
return true; // 提交表单
}
当文本框内容被选中时
onselect：onselect 事件发生在元素中的文本被选中之后。
onselect 事件主要用于 或 元素。
userCode.onselect = function () {
console.log("已经选择了文本框内容")
}
事件-窗口
窗口焦点变化
onblur：事件发生在对象失去焦点时。
onfocus：事件发生在对象获得焦点时。
onblur 事件类似于 onfocusout 事件。主要区别在于 onblur 事件不会冒泡。因此，如果您想找出元素或其子元素是否失去焦点，可以使用 onfocusout 事件。但是，您可以通过使用 onblur 事件的 addEventListener() 方法的 useCapture 参数（可选）来实现这一点。
window.onblur = function (){
console.log("窗口失去焦点")
}
window.onfocus = function () {
console.log("窗口获得焦点")
}
窗口加载完成
onload： onload 事件在对象被加载后发生。
window.onload = function () {
console.log("窗口加载完成")
}
窗口大小改变时间
onresize：onresize 事件发生在窗口大小发生改变时
window.onresize = function () {
console.log("窗口的大小发生改变")
}
事件-键盘
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input type="text" id="text"/>
<script>
let text = document.getElementById("text");
script>
body>
html>
键盘按下事件
onkeydown：onkeydown 事件会在用户按下一个键盘按键时发生。
text.onkeydown =function (event) {
// console.log(event.code);
console.log(event.key);
// console.log(event.keyCode);
}
键盘松开事件
onkeyup: onkeyup 事件会在用户松开键盘时发生。
text.onkeyup =function (event) {
// console.log(event.code);
console.log(event.key);
// console.log(event.keyCode);
}
键盘按下并送开事件
onkeypress：onkeypress 事件会在键盘按键被按下并释放一个键时发生
text.onkeypress =function (event) {
// console.log(event.code);
console.log(event.key);
// console.log(event.keyCode);
}
他们三者的触发顺序是
- onkeydown
- onkeypress
- onkeyup
事件-鼠标
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="box" style="color: white;overflow: auto;width: 200px;height: 200px;background-color: black;">
<div id="box2" style="width: 100px;height: 100px;background-color: pink;">
div>
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
div>
<script type="text/javascript">
let box = document.getElementById("box");
let box2 = document.getElementById("box2");
script>
body>
html>
鼠标点击事件
onclick ：onclick 事件在用户单击元素时发生。
box.onclick = function () {
console.log("用户单击了容器");
}
ondblclick：ondblclick 事件在用户双击元素时发生。
box.ondblclick = function () {
console.log("用户双击了容器");
}
鼠标移动事件
onmousemove：onmousemove 鼠标在容器中移动时触发
box.onmousemove = function () {
console.log("鼠标的指针移动时")
}
onmouseover：onmouseover 事件发生在鼠标指针移动到元素或它的子元素上时
box.onmouseover = function () {
console.log("鼠标的指针移动到了容器中A")
}
box2.onmouseover = function () {
console.log("鼠标的指针移动到了容器中B")
}