【小结】jQuery事件

鼠标事件
键盘事件
其他事件
事件参数
事件绑定与取消

含fn参数说明有回调函数在里面

---

鼠标事件-click、dblclick

click:鼠标单击时触发；dblclick:鼠标双击时触发
例如：

$("div").click(function(){
$(this).css("text-indent","0")//点击后首行缩进为0
})

• 鼠标双击时会触发单击事件，如果要区别开来需要阻止事件冒泡
  ###鼠标事件-mousedown、mouseup
  mousedown：鼠标按下时触发
  mouseup：鼠标松开时触发
  例如：

 $('div').mousedown(function(){
        $(this).css('background-color','red'); //鼠标按下时背景变红
    })
 $('div').mouseup(function(){
        $(this).css('background-color','yellow'); //鼠标按下时背景变黄
    })

鼠标事件-mouseenter、mouseleave

鼠标进入、移出时触发
例如：

    $('li').mouseenter(function(){
        $(this).css('font-size','40px').css('color','red');//鼠标移入时修改字体大小和颜色
    })
    $('li').mouseleave(function(){
        $(this).css('font-size','medium').css('color','black');//鼠标移出时修改字体大小和颜色
    })

鼠标事件-hover

hover([over],out)
将鼠标进入、移出时触发整合成一个函数

     $('li').hover(function()
    { 
     $(this).css('font-size','40px').css('color','red');//鼠标移入时修改字体大小和颜色
    },function()
    {
     $(this).css('font-size','medium').css('color','black');//鼠标移出时修改字体大小和颜色
    })

鼠标事件-mouseover、mouseout

鼠标进入（移出）指定元素及其子元素时触发

• 由于每个子元素都会触发事件，不利于事件冒泡和捕获，因此不建议使用
  ###鼠标事件-mousemove
  mousemove([[data],fn])
  在DOM内部移动时会发生mousemove事件
  ###鼠标事件-scroll
  scroll([[data,fn])
  当滚动指定元素时，会发生scroll事件

• 不一定是通过滚轮，拖动滚动条也可以

---

键盘事件

• 按下键盘会触发键盘事件，顺序依次为：keydown->keypress->keyup
  keydown、keypress事件触发在文字还没嵌入到文本框（只是按下字符键，显示的结果）

keydown([[data],fn])

当键盘或按钮被按下时，发生keydown事件

• 必须要在能获取焦点的地方才能发生事件
• 在输入法中输入的会有process值

keyup([[data],fn])

当键盘或按钮松开时，发生keydown事件，发生在当前获得焦点（光标）的元素上
例如：

 $('input').keyup(function(){
        $('p').text($(this).val()); //在p标签上实时获取输入值
    })

• 必须要在能获取焦点的地方才能发生事件
• 在输入法中输入的会有process值
  ###keypress([[data],fn])
  当键盘或按钮被按下时，发生keypress事件
• 旧版键盘事件，但还是被保留下来了，只有输入内容的时候才响应，ctrl、shift还有输入法等输入不响应，因为没有输入内容

---

其他事件

###其它事件-ready、resize
read(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
resize([[data],fn])
当调整浏览器窗口的大小时，发生resize事件

• 注意是窗口大小，并不是文档大小，可以使用window
  ###其它事件-focus、blur
  focus([[data],fn])、blur([[data,fn])
  当元帅**获得（失去）**焦点时触发focus(blus)事件
  例如判断输入框是否有内容，并改变边框颜色和提示信息：

$('input').focus(function(){
       $('span').text('请输入用户名');//获取焦点后提示
   })
    $('input').blur(function(){
        if($(this).val() == ''){ //失去焦点后判断
        $(this).css({'border':'2px solid red'});
       $('span').text('用户名不能为空') 
        }
       else{
        $(this).css({'border':'2px solid green'});
        $('span').text('');
       }
   })

其它事件-change

change([[data],fn])
当元素的值发生改变时，会发生change事件

• 非实时，只有value改变的时候才会发生

4-5 其它事件-select

select([[data],fn])
textarea或者文本类型的input中的文本被选中时触发，可选中并且还能编辑才有效

其它事件-submit

submit([[data],fn])
提交表单时会发生submit事件

• button 在form中时 在除了IE的其他内核浏览器中 作为submit存在
• submit事件的用途
  提交表单
  阻止表单提交
  表单验证
  submit()是表单 要提交时 所触发的事件(所以要放在点击事件中)
  所以在submit 的回调函数中 放入验证时所需要进行的操作
  return false时 表单不会被提交

---

事件参数event

• 所有事件都会传递一个event参数

---

事件绑定与取消-on

on(events,[selector].[data].fn)
在选择的元素上绑定一个或者多个事件的事件处理函数
可以参考以下格式：

$(document).on('事件类型; '绑定的元素',fn);
同时绑定多个事件$(document).on({
'事件类型': fn
},{
'事件类型': fn
});

• [selector]是可以动态生成的
• 通过{}绑定多个事件

事件绑定与取消-off

off(events,[selector].[data].fn)
在选择的元素上移除一个或者多个事件的事件处理函数

• jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off （面试竟然问事件绑定有多少种
• 每个绑定都要对应一个解绑，代码有点冗余
• document不是一个普通的对象，必须用add()来选择

事件绑定与取消-one

one(type.[data].fn)
为每一个匹配元素的特定事件（比如说click）绑定一个一次性的事件处理函数

• 绑定一次就会自动移除

简书传送门：https://www.jianshu.com/p/6f571d483902