JQuery的事件处理

发表于 | 分类于

JQuery的事件处理

[TOC]

基本事件处理

  • 浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 获取超链接的jQuery对象:
    var a = $('#hello');
    //绑定指定的事件
    a.on('click', function () {
        alert('Hello!');
    });
    //或者
    a.click(function () {
        alert('Hello!');
    });

  • 常见的鼠标事件

    1. click: 鼠标单击时触发；
    2. dblclick：鼠标双击时触发；
    3. mouseenter：鼠标进入时触发；
    4. mouseleave：鼠标移出时触发；
    5. mousemove：鼠标在DOM内部移动时触发；
    6. hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

  • 常见的其他事件

    1. focus：当DOM获得焦点时触发；
    2. blur：当DOM失去焦点时触发；
    3. change：当、或的内容改变时触发；
    4. submit：当提交时触发；
    5. ready：当页面被载入并且DOM树完成初始化后触发。

    ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。

    1
    2
    3
    4
    5
    6
    7
    8
    $(document).on('ready', function () {
                ///初始化操作
                });
            });
    //或者
    $(function () {
        // init...
    });

  • 动画事件

    1. 显示隐藏动画

      1
      2
      3
      4
      var div = $('#test-show-hide');
      div.hide(3000); // 在3秒钟内逐渐消失
      div.show(3000); // 在3秒钟内逐渐显示
      div.toggle(); //根据当前状态决定是show()还是hide()。

    2. 自定义动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      var div = $('#test-animate');
      //在3s内变化到制定的css样式
      div.animate({
          opacity: 0.25,
          width: '256px',
          height: '256px'
      }, 3000, function () {
        	//动画结束的回调函数
          console.log('动画已结束');
          // 恢复至初始状态:
          $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
      });

      ​

    ​