鼠标事件

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>标签内容的时候触发