DOM事件
JavaScript事件
- JavaScript事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。
- JavaScript事件是可以被JavaScript侦测到的行为.
JavaScript事件发生的条件
- 主角(事件源):触发事件的元素
- 发生什么事(事件类型):比如单击,移动到上方等等
- 做什么事(事件处理程序):事件被触发以后执行的代码(函数),这个函数就是在这个元素被触发了对应的事件后自己执行的函数
执行事件的步骤
- 获取事件源
- 绑定事件
- 添加事件的处理程序
- 运行并触发事件
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM事件</title>
<style>
#mydiv {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="mydiv">
这是一个div
</div>
<script>
window.onload = function () {
var mydiv = document.querySelector("#mydiv");
mydiv.onclick = function () {
alert("你好");
}
}
</script>
</body>
</html>
JavaScript中常用的DOM事件
属性 | 当以下情况发生时,出现此事件 |
---|
onabort | 当图像加载被中断时 |
onblur | 当用户离开输入字段时(元素失去焦点) |
onchange | 当用户更改输入字段的内容时 |
onclick | 当鼠标点击某个对象时 |
ondblclick | 当鼠标双击某个对象时 |
onerror | 当加载文档或图像时发生某个错误时 |
onfocus | 当输入字段获得焦点时(元素获得焦点) |
onkeydown | 当某个键盘的键被按下时 |
onkeypress | 当某个键盘的键被按下或按住时 |
onkeyup | 当某个键盘的键被松开时 |
onload | 当某个页面或图像被完成加载时 |
onmousedown | 当某个鼠标按键被按下时 |
onmousemove | 当鼠标被移动时 |
onmouseout | 当鼠标从某元素移开时 |
onmouseover | 当鼠标被移到某元素之上时 |
onmouseup | 当某个鼠标按键被松开时 |
onreset | 当重置按钮被点击时 |
onresize | 当窗口或框架被调整尺寸时 |
onselect | 当文本被选定时 |
onsubmit | 当提交按钮被点击时 |
onunload | 当用户退出页面时 |
案例:
实现密码正确错误判断的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码判断</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?vdlx6t');
src: url('fonts/icomoon.eot?vdlx6t#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?vdlx6t') format('truetype'),
url('fonts/icomoon.woff?vdlx6t') format('woff'),
url('fonts/icomoon.svg?vdlx6t#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
* {
margin: 0px;
padding: 0px;
}
.boxsum {
height: 50px;
margin-top: 100px;
margin-left: 50px;
}
.boxmax {
width: 500px;
height: 50px;
margin: 0px auto;
line-height: 50px;
}
.pd {
color: red;
font: 12px "icomoon";
}
</style>
</head>
<body>
<div class="boxsum">
<div class="boxmax">
<label for="pwd">请输入密码:</label>
<input type="password" id="pwd">
<i class="pd"></i>
</div>
</div>
<script>
window.onload = function () {
var mm = document.querySelector("#pwd")
var dc = document.querySelector(".pd")
mm.oninput = function () {
if (mm.value == "123456") {
dc.innerHTML = ""
dc.style.color = "skyblue"
} else {
dc.innerHTML = ""
dc.style.color = "red"
}
}
}
</script>
</body>
</html>