事件：文档或者浏览器窗口发生的一些特定交互瞬间。通过监听这些事件，可以来实现在事件发生时执行特定的操作。（也就是说操作页面中的一些东西）
第一种就是鼠标常用的事件~
这是原生写法：原生写法不需要引入外部链接直接就可以使用
鼠标事件：
*1.onClick (鼠标点击事件)*
`
<body>
<!--单纯的一个button按钮 -->
<button>鼠标点击事件</button>
<script>
//定义一个变量接收DOM元素
let Btn=document.querySelector('button')
//然后给接收过来的变量添加鼠标点击事件
Btn.ondblclick=function(){
console.log('我是鼠标点击事件');
}
</script>
</body>
`
2.*ondblclick （鼠标双击事件）*
`
<body>
<!--单纯的一个button按钮 -->
<button>鼠标双击事件</button>
<script>
//定义一个变量接收DOM元素
let Btn=document.querySelector('button')
//然后给接收过来的变量添加鼠标双击事件
Btn.ondblclick=function(){
console.log('我是鼠标双击事件');
}
</script>
</body>
`
3.onmouseover（鼠标移入事件）
`
<body>
<!--还是那个单纯的button按钮 -->
<button>鼠标移入事件</button>
<script>
//还是那个变量接收DOM元素
let Btn=document.querySelector('button')
//然后给接收过来的变量添加鼠标移入事件
Btn.onmouseover=function(){
console.log('我是鼠标移入事件');
}
</script>
</body>
`
4.onmouseout (鼠标移出事件)
`
<body>
<!--我还还还是那个单纯的button按钮 -->
<button>鼠标移出事件</button>
<script>
//还还还是那个变量接收DOM元素
let Btn=document.querySelector('button')
//然后给接收过来的变量添加鼠标移入事件
Btn.onmouseout=function(){
console.log('我是鼠标移出事件');
}
</script>
</body>
`
第二种就是键盘中常用的事件~
键盘事件：
1.onKeydown(键盘点击事件)
`
<body>
<!-- 这是一个单纯的input输入框 -->
<input type="text">
<script>
// 还是那个变量接收DOM元素
let input=document.querySelector('input')
input.onkeydown=function(){
console.log('我是鼠标单击事件');
}
</script>
</body>
`
2.onkepress(键盘按住事件）
`<body>
<!-- 这还是一个单纯的input输入框 -->
<input type="text">
<script>
// 还是那个变量接收DOM元素
let input=document.querySelector('input')
input.onkepress=function(){
console.log('键盘按住事件');
}
</script>
</body>
`
3.onkeyup（我是键盘抬起事件）
`<body>
<!-- 这还还是一个单纯的input输入框 -->
<input type="text">
<script>
// 还还是那个变量接收DOM元素
let input=document.querySelector('input')
input.onkeyup=function(){
console.log('在键盘抬起是触发');
}
</script>
</body>
`
第三种也很常见的input中的事件
表单事件：
1.onfocus (表单获取焦点）
`<body>
<!-- 这是一个单纯的input输入框 -->
<input type="text">
<script>
// 还是那个变量接收DOM元素
let input=document.querySelector('input')
input.onfocus=function(){
console.log('在input框中获取焦点时触发');
}
</script>
</body>
`
2.onblur (表单失去焦点）
`<body>
<input type="text">
<script>
let input=document.querySelector('input')
input.onblur=function(){
console.log('在光标消失在input框中触发');
}
</script>
</body>
`
3.onchange (表单内容改变）
`<body>
<input type="text">
<script>
let input=document.querySelector('input')
input.onblur=function(){
console.log('在input中input中的值发生改变的时候触发');
}
</script>
</body>
`
4.oninpt (表单输入触发）
`<body>
<input type="text">
<script>
let input=document.querySelector('input')
input.oninpt=function(){
console.log('在用户输入的时候可以触发');
}
</script>
</body>
`
还有一种写法就是用jquery的这种写法这种比较简单
[可以在这里面下载](j查询 (jquery.com))
jquery中的点击事件
`
点击事件：
一.click (jquery点击事件）
{dblclick，mouseover，mouseout}这写和点击写法事件一样
`
<!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>
//这是引入jQuery链接
<script src="./js/jquery.js"></script>
</head>
<body>
<button>点击事件</button>
<script>
$('button').click(function(){
console.log(这是点击事件);
})
</script>
</body>
</html>
`
jquery中的键盘输入事件
`
点击事件：
一.keyup (jquery键盘抬起事件）
{keypress,keydown}用法一样
`
<!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>
//这是引入jQuery链接
<script src="./js/jquery.js"></script>
</head>
<body>
// <input type="text">
<script>
$('input').keyup(function(){
console.log('键盘抬起事件');
})
</script>
</body>
</html>
`
jquery中的input事件
`
点击事件：
一.focus (jquery失去焦点）
{blur,input,change}用法一样
`
<!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>
//这是引入jQuery链接
<script src="./js/jquery.js"></script>
</head>
<body>
<input type="text">
<script>
$('input').focus(function(){
console.log('焦点失去事件');
})
</script>
</body>
</html>
`
