前言
今天学习的是js事件，JavaScript事件是由访问Web页面的用户引起的一系列操作，HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为，也可以是用户行为。
一、JS事件是什么？
事件概念：当点击一个按钮的时候，会弹出一个对话框，在javascript中，“点击”这个事情就看作一个事件，“弹出对话框”其实就是点击事件中做的一些事。
事件构成：1.事件源 触发事件的元素 eg:按钮
2.事件类型 事件任何触发 eg:点击，双击，移动
3.事件处理函数 事件做什么
二、事件对象
1.事件对象概念
事件对象是处理事件，与事件相关的
2.创建事件对象
创建事件对象：当触发事件，自动生成一个时间对象
和window一打开游览器窗口生成一个window对象类似
3.获取事件对象
在事件处理函数中获取名为 event
当定义方式为元素和事件行为分离时：
更改事件对象名：事件处理函数定义一个形参接收事件对象
代码如下（示例）：
<script> btn.onlick = function(e){ //e=event //console.log(event) console.log(e) } </script>事件兼容性问题：
在低版本游览中 ，事件对象写为 window.event
代码如下（示例）：
<script> btn.onlick = function(e){ //e=event e = e || window.event console.log(e) } </script>
4.事件对象位置属性
1.相对于事件源：是相对于你点击的元素的边框内侧开始计算
offsetX 和offsetY
2.相对于游览器窗口：是相对于浏览器窗口来计算的，不管你页面滚动到什么情况，都是根据窗口来计算坐标
clientX 和 clientY
3.相对于页面：是相对于整个页面的坐标点，不管有没有滚动，都是相对于页面拿到的坐标点
pageX 和 pageY
注：当页面没有滚动时，client和page两者相同
5.常见事件
1.鼠标事件
mouseover 鼠标移入
mouseout 鼠标移出
mousemove 鼠标移动
代码如下（示例）：
//样式部分
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 40px;
background-color: skyblue;
text-align: center;
line-height: 40px;
color: blue;
}
</style>
//结构部分
<div>前端编程</div>
<script>
/*
鼠标移入div区块，字体颜色变为红色
复杂问题简化
分解：
1. 鼠标移入div区块
div.onmouseover = function(){
改变字体颜色
}
2. 字体颜色变为红色
div.style.color = 'red'
*/
var divEle = document.querySelector('div')
// 鼠标移入
divEle.onmouseover = function () {
divEle.style.color = 'red'
}
// 鼠标移出
divEle.onmouseout = function () {
divEle.style.color = 'blue'
}
// 鼠标移动
divEle.onmousemove = function (e) {
// 事件对象
e = e || window.event
//打印鼠标(光标)位置
console.log(e.offsetX, e.offsetY)
}
// document.oncontextmenu = function(e){
// e.preventDefault() // 元素默认行为都可阻止
// alert('右键')
// }
// 左键按下
document.onmousedown = function () {
console.log('mousedown')
// 鼠标移动事件
document.onmousemove = function (e) {
e = e || window.event
console.log('x : ', e.clientX, ' y :', e.clientY)
}
}
</script>鼠标事件的案例：(区域块移动)
代码如下（示例）：（样式部分）
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 500px;
height: 500px;
background: skyblue;
margin: 100px;
position: relative;
/* overflow: hidden; */
}
p{
width: 100px;
height: 100px;
background: olivedrab;
position: absolute;
top: 20px;
left: 20px;
text-align: center;
line-height: 100px;
color: white;
display: none;
pointer-events: none;
}
</style>代码如下（示例）：（结构部分）
<div>
<p>啦啦啦~</p>
</div>
<script>
/*
效果：当鼠标在大区域移动时，小区域跟着鼠标一起移动
1.鼠标移动时获取鼠标在大区域的位置
2.将鼠标位置赋给小区域
*/
var divEle=document.querySelector('div')
var pEle=document.querySelector('p')
//鼠标移入时，显示小区域
divEle.onmouseover = function(){
pEle.style.display='block'
}
//鼠标移除时，小区域隐藏
divEle.onmouseout = function(){
pEle.style.display='none'
}
divEle.onmousemove=function(e){
e= e || window.event
//获取鼠标位置
var x=e.offsetX -pEle.offsetWidth /2
var y=e.offsetY -pEle.offsetHeight /2
//边界检查
if(x<0){
x=0
}
if(x> (divEle.clientWidth -pEle.clientWidth)){
x= (divEle.clientWidth -pEle.clientWidth)
}
if(y<0){
y=0
}
if(y> (divEle.clientHeight -pEle.clientHeight)){
y= (divEle.clientHeight -pEle.clientHeight)
}
//将鼠标位置赋给小区域
pEle.style.top= y +'px'
pEle.style.left=x +'px'
}
</script>2.表单事件
表单提交事件 submit
当点击表单提交按钮默认行为：
执行action属性指定的url(地址跳转，同时获取表单输入框以名称值对形式作为参数传递）
表单提交事件（默认行为）
submit是表单from元素
作用：表单验证（可以做非空验证，即表单输入框内容不能为空）
阻止表单默认行为
e.preventDefault()
内容转变事件（表单change)
onchange :表单项内容发生变化时触发（多用于图片预览）
表单事件的案例（表单非空验证）
代码如下（示例）：（样式部分）
<style>
* {
padding: 0;
margin: 0;
}
form {
width: 500px;
background-color: skyblue;
margin: 100px auto;
padding: 50px;
}
form input {
width: 100%;
line-height: 40px;
margin-top: 20px;
}
#login {
height: 40px;
}
</style>代码如下（示例）：（结构部分）
<form action="">
<input type="text" value="" name="username" placeholder="请输入用户名">
<input type="password" name="password" id="" placeholder="请输入密码">
<input type="submit" value="提交" >
</form>
<script>
var formEle=document.querySelector('form')
var usernameEle=document.querySelector('input[name="username"]')
var passwordEle=document.querySelector('input[name="password"]')
formEle.onsubmit=function(e){
e=e || window.event
e.preventDefault()
var username=usernameEle.value
var password=passwordEle.value
//做非空验证
if(username === ''){
alert('用户名不能为空')
return
}else if(password === ''){
alert('密码不能为空')
return
}
//提交验证密码或用户名是否正确
if(username == 'acy' && password =='qaz123'){
location.href='https://music.163.com/'
}else{
alert('用户名或密码错误')
}
}
</script>3.焦点事件
focus 获取焦点事件 eg:判断表单中username和password不能为空
blur 失去焦点事件
4.键盘事件
键盘事件的事件源是document
keyup 抬起
keydown 按下
keypress 按住
键码 keycode
获取键码：
e=e || window.event
e.keycode
获取键码兼容性写法：
var keycode = e.keyCode || e.which
组合按键：
事件对象属性：altkey (alt按下为true，否则为false)
shiftkey ( shift按下为true，否则为false)
ctrlkey ( ctrl按下为true，否则为false)
5.游览器相关事件
load 文档加载完成事件
scroll 滚动事件
resize 窗口尺寸改变事件 （多用于移动端适配）
代码如下（示例）：
// 文档加载完成事件
window.onload=function(){
//是heml文档加载完成之后执行
}
//滚动事件
window.onscroll=function(){
console.log(document.documentElement.scrollTop)
}
6.触摸事件
touchstart 触摸开始事件
touchend 触摸结束事件
touchmove 触摸移动事件
7.鼠标事件
click 点击事件
dbclick 双击事件
contextmenu 右键单击事件
mousedown 鼠标左键按下事件
mouseup 鼠标左键抬起事件
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
