鼠标事件

• click和dbclick，鼠标单击和双击

<div id="test">点击触发<div>
$("#test").click(function() {
    //this指向 div元素
});

<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

• mousedown 与 mouseup 鼠标按下和松开
• mousemove 鼠标移动
• mouseover 与 mouseout 鼠标移入移出
• mouseenter与mouseleave 同样是鼠标移入移出
  区别：

mouseover 与 mouseout 会作用在选中元素的后代身上，而mouseenter与mouseleave则不会

• hover()方法是同时绑定 mouseenter和 mouseleave事件。

 $("p").hover(
        function() {
            $(this).css("background", 'red');
        },
        function() {
            $(this).css("background", '#bbffaa');
        }
    );

• focusin()方法在所选元素获得焦点的时候触发
• focusout()方法在所选元素失去焦点的时候触发

表单事件

• focus与blur事件，与focusin和focusout不同的是 blur与focus不会总用于他的后代，即不支持冒泡处理
• change事件
  input元素
  监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发
  select元素
  对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
  textarea元素
  多行文本输入框，当有改变时，失去焦点后触发change事件
• select只能作用与<input>和<textarea>元素，当鼠标选中文字时触发
• submit事件，在提交表单的时候触发
  具体能触发submit事件的行为：
  1. <input type="submit">
  2.<input type="image">
  3.<button type="submit">
  4.当某些表单元素获取焦点时，敲击Enter（回车键）

<script type="text/javascript">
    //回车键或者点击提交表单
    $('#target1').submit(function(e) {
        alert('捕获提交表达动作,不阻止页面跳转')
    });
    //回车键或者点击提交表单,禁止浏览器默认跳转：
    $('#target2').submit(function() {
        alert('捕获提交表达动作,阻止页面跳转')
        return false;
    });
    </script>

<form action="______">这里面的地址就是提交之后页面跳转的地址。

键盘事件

• keydown()与keyup()事件
• keypress事件与keydown和keyup的主要区别
  1.只能捕获单个字符，不能捕获组合键
  2.无法响应系统功能键（如delete，backspace）
  3.不区分小键盘和主键盘的数字字符

事件的绑定与解绑

• on()的多事件绑定
  使用方法
  基本用法
  $("#elem").on('click',function(){}) //on方式
  多个事件绑定同一个函数
  $("#elem").on("mouseover mouseout",function(){ });
  多个事件绑定不同函数
  $("#elem").on({mouseover:function(){}, mouseout:function(){} });
  示例：

  <script type="text/javascript">
    //多事件绑定一
    $("#test2").on('mousedown mouseup', function(e) {
        $(this).text('触发事件：' + e.type)
    })
  </script>
  <script type="text/javascript">
    //多事件绑定二
    $("#test3").on({
        mousedown: function(e) {
            $(this).text('触发事件：' + e.type)
        },
        mouseup: function(e) {
            $(this).text('触发事件：' + e.type)
        }
    })
  </script>

• on()的高级用法,事件委托机制

  <div class="left">
        <div class="aaron">
            <a>点击这里</a>
        </div>
  </div>
  <script type="text/javascript">
    //给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制，点击a元素的时候，事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })
  </script>

以上代码，在点击<a>标签内容的时候触发

• 卸载事件
  删除一个事件：$("elem").off("name")
  删除多个事件：$("elem").off("name1 name2")
  删除所有事件：$("elem").off()