<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript常用事件</title>
<style>
div {
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<form action="">
<input type="text" value="选中我试试">
<input type="submit" value="submit">
</form>
<script>
// 获取div元素
let ele = document.querySelector('div');
// 1.点击事件 click
ele.addEventListener('click', () => {
ele.style.backgroundColor = 'blue';
})
// 2.双击事件 dblclick
ele.addEventListener('dblclick', () => {
ele.style.backgroundColor = 'purple';
})
// 3.鼠标按下事件
ele.addEventListener('mousedown', () => {
ele.style.backgroundColor = 'green';
})
// 4.鼠标抬起事件
ele.addEventListener('mouseup', () => {
ele.style.backgroundColor = 'yellow';
})
//5.鼠标移动事件
ele.addEventListener('mousemove', () => {
ele.style.backgroundColor = 'gray';
})
//6.鼠标移动到元素上事件
ele.addEventListener('mouseover', () => {
ele.style.backgroundColor = 'black';
})
//7.鼠标从元素上移走事件
ele.addEventListener('mouseout', () => {
ele.style.backgroundColor = 'pink';
})
// 获取input元素
let ip = document.querySelector('input');
//8.元素获得焦点事件
ip.addEventListener('focus', () => {
ip.style.outline = '1px solid green';
})
//9.元素失去焦点事件
ip.addEventListener('blur', () => {
ip.style.outline = 'none';
})
// 10.加载事件
window.addEventListener('load', () => {
// alert('加载成功');
})
// 11.按键被按下事件
window.addEventListener('keydown', () => {
console.log('按键按下');
})
// 12.按键松开事件
window.addEventListener('keyup', () => {
console.log('按键松开');
})
// 13.按键按下并且松开事件
window.addEventListener('keypress', () => {
console.log('按键按下并且松开');
})
// 14.域的内容改变事件
ip.addEventListener('change', () => {
alert('内容改变');
})
// 15.文本框中的文本被选中事件
ip.addEventListener('select', () => {
alert('文本框中的文本被选中');
})
// 16.表单提交事件
let form = document.querySelector('form');
form.addEventListener('submit', () => {
alert('点击了submit');
})
</script>
</body>
</html>
这些事件都是在日常的开发中比较常见的事件了,如果还想了解其他的事件可以访问下面的网址HTML DOM 事件对象 | 菜鸟教程
JavaScript中常见的的事件总结,鼠标事件、键盘事件、表单事件、加载事件、点击事件、双击事件,这些事件都是我们在写代码的时候经常会用到的,使用代码的形式通俗易懂的讲解这些事件应该怎么使用,需要反复练习,烂熟于心。