鼠標事件

• click和dbclick，鼠標單擊和雙擊

<div id="test">點擊觸發(fā)<div>
$("#test").click(function() {
    //this指向 div元素
});

<div id="test">點擊觸發(fā)<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數(shù)據(jù)
});

• mousedown 與 mouseup 鼠標按下和松開
• mousemove 鼠標移動
• mouseover 與 mouseout 鼠標移入移出
• mouseenter與mouseleave 同樣是鼠標移入移出
  區(qū)別：

mouseover 與 mouseout 會作用在選中元素的后代身上，而mouseenter與mouseleave則不會

• hover()方法是同時綁定 mouseenter和 mouseleave事件。

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

• focusin()方法在所選元素獲得焦點的時候觸發(fā)
• focusout()方法在所選元素失去焦點的時候觸發(fā)

表單事件

• focus與blur事件，與focusin和focusout不同的是 blur與focus不會總用于他的后代，即不支持冒泡處理
• change事件
  input元素
  監(jiān)聽value值的變化，當(dāng)有改變時，失去焦點后觸發(fā)change事件。對于單選按鈕和復(fù)選框，當(dāng)用戶用鼠標做出選擇時，該事件立即觸發(fā)
  select元素
  對于下拉選擇框，當(dāng)用戶用鼠標作出選擇時，該事件立即觸發(fā)
  textarea元素
  多行文本輸入框，當(dāng)有改變時，失去焦點后觸發(fā)change事件
• select只能作用與<input>和<textarea>元素，當(dāng)鼠標選中文字時觸發(fā)
• submit事件，在提交表單的時候觸發(fā)
  具體能觸發(fā)submit事件的行為：
  1. <input type="submit">
  2.<input type="image">
  3.<button type="submit">
  4.當(dāng)某些表單元素獲取焦點時，敲擊Enter（回車鍵）

<script type="text/javascript">
    //回車鍵或者點擊提交表單
    $('#target1').submit(function(e) {
        alert('捕獲提交表達動作,不阻止頁面跳轉(zhuǎn)')
    });
    //回車鍵或者點擊提交表單,禁止瀏覽器默認跳轉(zhuǎn)：
    $('#target2').submit(function() {
        alert('捕獲提交表達動作,阻止頁面跳轉(zhuǎn)')
        return false;
    });
    </script>

<form action="______">這里面的地址就是提交之后頁面跳轉(zhuǎn)的地址。

鍵盤事件

• keydown()與keyup()事件
• keypress事件與keydown和keyup的主要區(qū)別
  1.只能捕獲單個字符，不能捕獲組合鍵
  2.無法響應(yīng)系統(tǒng)功能鍵（如delete，backspace）
  3.不區(qū)分小鍵盤和主鍵盤的數(shù)字字符

事件的綁定與解綁

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

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

• on()的高級用法,事件委托機制

  <div class="left">
        <div class="aaron">
            <a>點擊這里</a>
        </div>
  </div>
  <script type="text/javascript">
    //給body綁定一個click事件
    //沒有直接a元素綁定點擊事件
    //通過委托機制，點擊a元素的時候，事件觸發(fā)
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })
  </script>

以上代碼，在點擊<a>標簽內(nèi)容的時候觸發(fā)

• 卸載事件
  刪除一個事件：$("elem").off("name")
  刪除多個事件：$("elem").off("name1 name2")
  刪除所有事件：$("elem").off()