五、jQuery事件

一、鼠标事件

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) // 事件触发时的时间，该时间是时间戳格式
})