JQuery常用事件

JQuery常用事件

---

常用事件

1. click(e)：鼠标单击，例如：

   $('div').click(function() {
       $(this).css('color', 'red');
   })
   

2. mouseover(e)：鼠标进入(进入子元素也触发，子元素先触发)

3. mouseout(e)：鼠标离开(离开子元素也触发，子元素先触发)

4. mouseenter(e)：鼠标进入(进入子元素不触发)

5. mouseleave(e)：鼠标离开(离开子元素不触发)

6. keydown(e)：按下键盘键，用在input标签上，例如：

   $('input[name=username]').keydown(function(e) {
      console.log(e.keyCode); // 获取按下键的ASCII值
   })
   

7. keyup(e)：松开键盘键，用在input标签上

8. keypress(e)：从键盘输入字符，用在input标签上，不识别ctrl等控制键和中文，例如：

   $('input[name=username]').keypress(function(e) {
       console.log(e.charCode); // 获取输入字符的ASCII值
   })
   

9. focus(e)：元素获得焦点，用于表单组件

10. blur(e)：元素失去焦点，用于表单组件

11. submit(e)：用户递交表单，写在form标签上

12. hover(e)：同时为mouseenter和mouseleave事件指定处理函数，例如：

    $('div').hover(function(){
        $(this).css('color', 'red')
    },function(){
        $(this).css('color', 'blue')
    });// 第一个函数移入触发，第二个移出触发
    

13. ready(e)：DOM加载完成

14. resize(e)：浏览器窗口的大小发生改变

15. scroll(e)：滚动条的位置发生变化，触发对象是window

---

on

将一个方法同时绑定到多个事件上，第一个参数表示事件组，事件间用空格隔开，第二个参数是触发方法，例如：

$('div').on('mouseenter mouseleave', function(){
  console.log('触发事件了');
})

---

one

用法同on函数，但是只触发一遍。