一、鼠标事件
1、鼠标点击
$('.box').mousedown(function(){
console.log('鼠标按下')
})
$('.box').mouseup(function(){
console.log('鼠标弹起')
})
$('.box').click(function(){
console.log('您点击了box')
})
$('.box').dblclick(function(){
console.log('您双击了box')
})
注意
1、双击事件伴随着单击事件，因此双击事件会触发两次单击事件
2、单击事件又伴随着mousedown和mouseup事件，单击事件的执行顺序为：鼠标按下>鼠标弹起>鼠标点击
2、鼠标移动
$('.box').mouseenter(function(){
console.log('mouseenter')
})
$('.box').mouseover(function(){
console.log('mouseover')
})
$('.box').mouseleave(function(){
console.log('mouseleave')
})
$('.box').mouseout(function(){
console.log('mouseout')
})
$('.box').hover(
// 鼠标悬浮在box上时执行
function(){
console.log('hover1')
},
// 鼠标离开box时执行
function(){
console.log('hover2')
}
)
// 鼠标在.box上移动时触发mousemove事件
$('.box').mousemove(function(e){
// e是事件参数，本章最后会讲
console.log('鼠标移动了')
console.log(e.pageX) // 当前鼠标在document文档(html)中水平方向的位置
console.log(e.offsetX) // 当前鼠标在.box中水平方向的位置
console.log(e.clientX) // 当前鼠标在文档所在窗口中水平方向的位置
console.log(e.screenX) // 当期鼠标在整个屏幕中水平方向的位置
console.error(
'-----------pageY,offsetY,clientY,sreenY与上同理,获取的是垂直方向的位置----------'
)
})
注意：
1、mouseenter、mouseover、mouseleave、mouseout
分别为鼠标进入时、鼠标滑过时、鼠标离开时、鼠标滑出时执行当鼠标放到box上时，执行mouseenter，然后执行mouseover，最后执行hover1 当鼠标离开box是，执行mouseleave，然后执行mouseout，最后执行hover2
2、hover的回到函数可以只写一个，如果只写了一个回到函数，则鼠标hover时和取消hover时都会调用这个回调函数
二、表单事件
// 获取焦点时触发focus事件
$('input').focus(function(){
// input获取焦点时，设置边框为蓝色
$(this).css('border','1px solid blue')
})
// 失去焦点时触发blur事件
$('input').blur(function(){
// input失去焦点时，设置边框为灰色
$(this).css('border','1px solid gray')
})
// input 值发生改变时触发change事件
// change 事件只适用于表单元素
// 当用于 select 元素时，change 事件会在选择某个选项时发生。
// 当用于 text 或 text area 时，change 事件会在元素失去焦点时发生。
$('input').change(function() {
console.log($(this).val())
})
// 你也可以主动触发change事件
$('input').change()
// submit 表单提交时触发
// submit 表单提交时触发
$('form').submit(function() {
alert('提交')
})
// 主动触发
$(selector).submit()
三、键盘事件
$('input').keydown(function(e) {
console.log('键盘按下了')
console.log(e.key) // 打印按下的键盘键对应的字符
console.log(e.keyCode) // 打印按下的键盘键对应的字符ASCII码，不懂ASCII码的请自行搜索
// 例如：按下 a 键，e.key = 'a' ; e.keyCode = 97
// 例如：按下回车键 e.key = 'Enter' ; e.keyCode = 13
})
$('input').keypress(function(e) {
console.log('键盘点击')
})
$('input').keyup(function(e) {
console.log('键盘弹起')
})
四、其他事件
1、文档准备就绪
$(document).ready(function(){
})
2、滚动事件
// scroll事件适用于所有可滚动的元素和window对象
$('.box').scroll(function() {
console.log('box滚动了')
})
//手动触发scroll事件
$('.box').scroll()
3、resize事件
// 调整浏览器窗口大小时，触发resize事件
$(window).resize(function() {
console.log('浏览器窗口尺寸发生了改变')
console.log($(this).height()) // 窗口尺寸发生改变时，获取窗口高度
console.log($(this).width()) // 获取创建偶宽度
})
// 你也可以手动触发resize事件
$(window).resize()
五、事件参数
每一个事件回到函数中都有一个参数 event，event对象中包含诸多属性和方法，下面列出一下比较常用的
$('.box').click(function(e){
e.preventDefault() // 阻止事件的默认行为
e.stopPropagation() // 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
console.log(e.pageX) // 当前鼠标在document文档(html)中水平方向的位置
console.log(e.offsetX) // 当前鼠标在.box中水平方向的位置
console.log(e.clientX) // 当前鼠标在文档所在窗口中水平方向的位置
console.log(e.screenX) // 当期鼠标在整个屏幕中水平方向的位置
console.log(
'pageY，offsetY，clientY，screenY 与上方x同理，是获取垂直方向的位置'
)
console.log(e.key) // 键盘事件中按下的键对应的字符
console.log(e.keyCode) // 键盘事件中按下的键对应的字符的ASCII码
console.log(e.which) // 同 e.key
console.log(e.timeStamp) // 事件触发时的时间，该时间是时间戳格式
})
