1.事件介绍：点击一个按钮时，会弹出一个对话框，点击就看作一个事件
2.事件的三要素：
1>事件源：触发事件的元素-->如按钮
2>事件类型：事件是如何触发的，点击，移动，双击。如onclick就是点击事件
3>事件处理函数：事件是做什么的，事件要执行的代码
事件对象：
1.处理事件，与事件相关的
2.当触发事件时，自动生成一个事件对象
如：window-打开浏览器窗口生产window对象
3.获取事件对象：在事件处理函数取名为event
更改事件对象名：事件处理函数定义一个形参，接收事件对象。
//获取事件对象
<div></div>
var divEle=document.queryselector('div')
divEle.onclick=function(e){
e=e||window.event
console.log(e)}
事件对象位置属性：
1.相对于自身：e.offsetX/e.offsetY
2.相对于浏览器：e.clientX/e.clientY
3.相对于页面：e.pageX/e.pageY
鼠标事件：
1.鼠标移入：mouseover
2.鼠标移出：mouseout
<div>鼠标移入变红色</div>
var divEle=document.querySelector('div')
divEle.onmouseover=function(){ //鼠标移入
divEle.style.color='red'}
divEle.onmouseout=function(){ //鼠标移出
divEle.style.color='bule'}3.鼠标移动事件：mousemove
divEle.onmousemove=function(e){
e=e||window.event
//打印光标位置
console.log(e.offsetX,e.offsetY)}4.鼠标右键事件：ele.οncοntextmenu=function(){}
5.鼠标左键按下事件:ele.onmousedown
6.鼠标左键抬起事件:ele.onmouseup
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: skyblue;
position: relative;
}
</style>
</head>
<body>
<div></div>
<script>
var divEle=document.querySelector('div')
//左键按下
divEle.onmousedown = function (e) {
e=e||window.event
//记录初始位置
var initX=e.offsetX
var initY=e.offsetY
document.onmousemove = function (e) {
e = e || window.event
var x = e.clientX-initX
var y = e.clientY-initY
divEle.style.top = y + 'px'
divEle.style.left = x + 'px'
}
}
//左键抬起
document.onmouseup = function () {
document.onmousemove = null
}
</script>
</body>
</html>表单事件：
1.表单提交事件：submit(触发)是表单form元素
2.表单的默认行为：当点击表单提交按钮默认行为，执行action属性指定的url地址跳转，同时获取表单输入框内容，以名称值对形式作为参数传递。
3.阻止默认行为e.preventDefault()
<!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>Document</title>
<style>
form {
width: 400px;
height: 200px;
background: skyblue;
margin: 100px auto;
padding: 50px;
}
form input {
width: 400px;
height: 40px;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!--
表单事件
表单提交事件
submitc
表单提交事件 - 默认行为
1. 触发表单提交事件
submit 是表单form元素
作用:
表单验证
- 非空验证
表单输入框内容不能为空
2. 默认行为
执行action属性指定的url地址跳转，同时获取表单输入框内容以名称值对形式做为参数传递
https://www.xxx.com/?username=admin&password=123
阻止表单默认行为
e.preventDefault()
-->
<form action="https://www.baidu.com">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" name="" id="tijiao">
</form>
<script>
var formEle = document.querySelector('form')
var usernameInput = document.querySelector('input[name="username"]')
var passwordInput = document.querySelector('input[name="password"]')
formEle.onsubmit = function (e) {
e = e || window.event
e.preventDefault() //阻止表单form默认行为
//表单非空验证
// 获取表单的值/内容
var username = usernameInput.value
var password = passwordInput.value
if (username == '') {
alert('用户名不能为空')
return
} else if (password == '') {
alert('密码不能为空')
return
}
if(username=='username'&&password=='123'){
location.href='https://www.baidu.com'
}else{
alert('用户名或密码错误')
}
}
</script>
</body>
</html>表单内容转变事件:onchage
<!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>表单项内容转变事件</title>
<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>
<!--
onchange
-->
</head>
<body>
<form action="">
<input type="text" placeholder="请输入用户名" name="username" /><br />
<input type="password" placeholder="请输入密码" name="password" /><br />
<input type="file" name="headerimg">
<input type="submit" value="确定" id="login" />
</form>
<script>
var headerInput = document.querySelector('input[name="headerimg"]')
headerInput.onchange = function(){ //表单内容转变事件
alert('change')
}
var usernameInput = document.querySelector('input[name="username"]')
usernameInput.oninput = function(){
console.log(usernameInput.value)
}
</script>
</body>
</html>
焦点事件：
1.focus获取焦点事件
2.blur失去焦点事件
<!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>Document</title>
<style>
form {
width: 400px;
height: 200px;
background: skyblue;
margin: 100px auto;
padding: 50px;
}
form input {
width: 400px;
height: 40px;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
</style>
</head>
<body>
<form action="https://www.baidu.com">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" name="" id="tijiao">
</form>
<script>
var inputEle=document.querySelector('input[name="username"]')
inputEle.onfocus=function(){
console.log('获取焦点事件')
}
inputEle.onblur=function(){
console.log('失去焦点事件')
}
</script>
</body>
</html>键盘事件：
1.抬起：keyup
2.按下：keydown
3.按住:keypress
document.onkeyup=function(e){
e=e||window.event
if(e.keycode==32){ //按下对应键码成功
alert('登陆成功')}
4.组合按键：e.altkey/e.shiftkey/e.ctrlkey
document.onkeydown = function(e){
e = e || window.event // 兼容ie
var keyCode = e.keyCode || e.which // 兼容FireFox2.0
if(e.keyCode === 65&&e.altKey){ //同时按下a键和alt键才能触发
alert('登录成功')
}
}浏览器相关事件：
1.文档加载完成事件：window.οnlοad=function(){这里面的代码，是文档加载完以后执行的}
2.滚动事件：window.οnscrοll=function(){
console.log(document.documentElement.scrolltop) //滚动就会获取离顶的高度}
3.窗口尺寸改变事件：window.οnresize=function(){
显示窗口尺寸：console.log(window.innerwidth,window.innerheight)}
触摸事件：
1.触摸开始事件：touchstart
2.触摸结束事件：touched
3.触摸抬起事件：touchmove
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
