目录
事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
事件是文档或者浏览器窗口中发生的，特定的交互瞬间
典型事例：
页面加载完毕，触发load事件
浏览器窗口放大或缩小，触发resize事件
用户单击元素，触发click事件
绑定事件的三种方法
绑定事件的第一种方式：在元素上使用事件属性来绑定事件
绑定事件的第二种方式：先获取元素再绑定事件
绑定事件的第三种方式：使用事件监听器来绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button onclick="show()">点我一下</button>
</body>
<script>
//绑定事件的第一种方式：在元素上使用事件属性来绑定事件
function show(){
alert('我是绑定事件的第一种方式');
}
//绑定事件的第二种方式：先获取元素再绑定事件
// var btnEle = document.querySelector('button');
// btnEle.ondblclick = function(){
// alert('我是绑定事件的第二种方式');
// }
//绑定事件的第三种方式：使用事件监听器来绑定事件
// btnEle.addEventListener('mouseover',function(){
// alert('我是绑定事件的第三种方式');
// })
</script>
</html>
常用的JavaScript事件
鼠标事件
由鼠标或类似用户动作触发的事件
事件名 |
描述 |
onclick |
鼠标点击某个对象 |
ondblclick |
鼠标双击某个对象 |
onmouseover |
鼠标被移到某元素之上 |
onmouseout |
鼠标从某元素移开 |
onmousedown |
某个鼠标按键被按下 |
onmousemove |
鼠标被移动 |
onmouseup |
某个鼠标按键被松开 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top{
width: 200px;
height: 30px;
background-color: #ccc;
font-size: 24px;
text-align: center;
line-height: 30px;
}
.buttom{
width: 200px;
height: 400px;
background-color: #f00;
display: none;
}
</style>
</head>
<body>
<div class="top">手机/运营商/数码</div>
<div class="buttom">111</div>
</body>
<script>
//鼠标移入灰色div中，红色div显示，鼠标移出灰色div，红色div隐藏
//获取灰色的div给它添加鼠标移入和移出事件
var topDivEle = document.querySelector('.top');
//获取红色div
var buttomDivEle = document.querySelector('.buttom');
//绑定鼠标移入事件
topDivEle.onmouseover = function(){
buttomDivEle.style.display = 'block';
}
//绑定鼠标移出事件
topDivEle.onmouseout = function(){
buttomDivEle.style.display = 'none';
}
</script>
</html>表单事件
由 HTML 表单内的动作触发的事件
事件名 |
描述 |
onfocus |
元素获得焦点 |
onblur |
元素失去焦点 |
onchange |
用户改变域的内容 |
onreset |
表单重置时触发 |
onsubmit |
表单提交时触发 |
注意：表单重置事件不支持input标签，支持form标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
姓名：<input type="text" value="ttt"/>
</form>
</body>
<script>
//第一步：获取元素
var inputEle = document.querySelector('input');
//第二步：添加事件
inputEle.onfocus = function(){
console.log('输入框获得了焦点'); //按F12显示结果
}
inputEle.onblur = function(){
console.log('输入框失去了焦点');
}
</script>
</html>键盘事件
键盘事件就是对键盘操作触发的事件
事件名 |
描述 |
onkeydown |
某个键盘的键被按下 |
onkeypress |
某个键盘的键被按下并释放一个键时发生 |
onkeyup |
某个键盘的键被松开 |
键盘事件的事件次序：onkeydown onkeypress onkeyup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text">
</body>
<script>
//第一步：获取input标签
var inputEle = document.querySelector('input');
//给获取的标签添加键盘按下事件
inputEle.onkeydown = function(){
console.log('键盘被按下');
}
//给获取的标签添加键盘释放事件
inputEle.onkeyup = function(){
console.log('键盘被释放');
}
</script>
</html>框架/对象（Frame/Object）事件
指的是那些不一定与用户操作有关的事件
事件名 |
描述 |
onload |
某个页面或图像被完成加载 |
onresize |
窗口或框架被调整尺寸 |
onscroll |
当文档被滚动时发生的事件 |
如果重载页面，也会触发 unload 事件（以及 onload 事件）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//获取p元素,这样获取p元素是获取不到的。我们需要等到html页面全部加载完毕之后才能获取
// var pEle = document.querySelector('p');
// console.log(pEle);//null
window.onload =function(){
var pEle = document.querySelector('p');
console.log(pEle);
}
</script>
</head>
<body>
<p>我是段落标签</p>
</body>
</html>