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