1、鼠標(biāo)事件

常見的click等事件這里不做詳細(xì)介紹

• 1、mousemove: 用來監(jiān)聽用戶移動的操作，基于移動的機制可以做出拖動、拖拽等一系列的效果出來。
  下面寫一個監(jiān)聽鼠標(biāo)移動的X位置的事件：
  HTML

<style>
    .content {
      width: 300px;
      height: 200px;
      background: red;
    }
  </style>

  <div class="test">
    <div class="content">
      <p>鼠標(biāo)在紅色區(qū)域移動的事件</p>
      <p>移動的X的位置：</p>
    </div>
  </div>

mousemove()方法

$('.content').mousemove(function(e){
      $(this).find('p:last').html('移動的X的位置：'+e.pageX)
})

• 2、mouseover與mouseout事件
  jQuery當(dāng)中提供了這樣兩個事件來監(jiān)聽用戶的移入移出操作
  用法其實與上面的mousemove類似，這里就不寫例子說明了，主要是為了總結(jié)鼠標(biāo)常用的監(jiān)聽事件

2、表單事件

• 1、focus和blur事件
  分別是對獲取焦點和失去焦點的監(jiān)聽，常用于表單的input標(biāo)簽中
  HTML

<div class="test">
    點擊觸發(fā)焦點
    <input type="text" value="hello">
  </div>

focus和blur事件

    let valText = $('.test input').val()
    //獲取焦點的時候，清空input的值
    $('.test input').focus(function(){
      if(valText == 'hello') {
        $(this).val('')
      }
    })
    
    //失去焦點的時候input的占位值是'請輸入'
    $('.test input').blur(function(){
      $(this).val('請輸入')
    })

• 2、change事件
  input元素、textarea和select元素的值都可以發(fā)生改變，當(dāng)前改變的時候，我們可以通過change事件去監(jiān)聽這個改變的動作。

input元素:

監(jiān)聽value值的變化，當(dāng)有改變時，失去焦點后觸發(fā)change事件。對于單選按鈕和復(fù)選框，當(dāng)用戶用鼠標(biāo)做出選擇時，該事件立即觸發(fā)。

select元素:

對于下拉選擇框，當(dāng)用戶用鼠標(biāo)作出選擇時，該事件立即觸發(fā)

textarea元素:

多行文本輸入框，當(dāng)有改變時，失去焦點后觸發(fā)change事件

下面用一個例子說明：
HTML

    <div class="left">
        <div class="aaron1">input：
            <input class="target1" type="text" value="監(jiān)聽input的改變" />
        </div>
        <div class="aaron2">select：
            <select class="target2">
                <option value="option1" selected="selected">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </div>
        <div class="aaron3">textarea：
            <textarea class="target2" rows="3" cols="20">多行的文本輸入控件</textarea>
        </div>
    </div>
    <p>輸出結(jié)果：</p>
    <div id="result"></div>

jQuery的change事件

//監(jiān)聽input值的改變
$('.target1').change(function(e) {
        $("#result").html(e.target.value)
});
//監(jiān)聽select
$('.target2').change(function(e) {
        $("#result").html(e.target.value)
});
//監(jiān)聽textarea
$('.target3').change(function(e) {
        $("#result").html(e.target.value)
});

代碼演示

3、事件的綁定和解綁

jQuery on()是官方推薦的綁定事件的一個方法

基本用法：on(events,[selector],[data],handler(eventObject))
先可以看一個簡單的用法，綁定一個點擊事件:

$('element').on('click',function(){
   //do something
})

多個事件綁定同一個函數(shù)：

$('element').on("mouseover mouseout" ,function(){
    //do something
})

多個事件綁定不同的函數(shù):

$('element').on({
  mouseover:function(){},
  mouseout:function(){}
})

on還有高級的用法就是實現(xiàn)事件委托，下面我們舉一個例子來說明
HTML

<div class="left">
  <div class="content">
     <a>點擊這里</a>
  </div>
</div>

事件委托

//事件的綁定在最上層的body上，當(dāng)用戶觸發(fā)a元素上，事件將向上冒泡，一直到body上。
//但是但我們提供了第二個參數(shù)（這里是a）,那么事件在冒泡過程遇到選擇器匹配元素（a），就觸發(fā)回調(diào)函數(shù)的處理。
$('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })

總結(jié)一下上面的事件委托：
首先給body綁定一個click事件
其次沒有直接a元素綁定點擊事件
通過委托機制，點擊a元素的時候，事件觸發(fā)；點擊其他地方事件并不會被觸發(fā)

代碼演示

• 卸載事件off()方法
  通過offIO方法移除該綁定

4、事件對象的使用

事件中的Event對象比較容易被我們所忽略，但有時候掌握它對我們也是很有用的
一個標(biāo)準(zhǔn)的'click'點擊事件:

$(elem).on("click",function(event){
   event //事件對象
})

下面在來通過一個小例子來了解事件對象的作用
HTML

<ul>
    <li class="even1"></li>
    <li class="even2"></li>
    <li class="even3"></li>
</ul>

上面的ul有3個子元素，若需要響應(yīng)每一個li事件，那么我們按照常規(guī)方法需要給所有的li都單獨綁定一個事件監(jiān)聽，這樣就顯得很復(fù)雜。同時我們注意到所有的li都有一個共同的父元素，所有的事件都是一致的，那么我們可以用到on()綁定事件中的高級用法'事件委托'

事件沒直接和li元素發(fā)生關(guān)系，而且綁定父元素了。由于瀏覽器有事件冒泡的這個特性，我們可以在觸發(fā)li的時候把這個事件往上冒泡到ul上，因為ul上綁定事件響應(yīng)所以就能夠觸發(fā)這個動作了,那么我們需要如何才知道是觸發(fā)了哪一個li元素了？

這里就可以引出事件對象了：

• 事件對象是用來記錄一些事件發(fā)生時的相關(guān)信息的對象。事件對象只有事件發(fā)生時才會產(chǎn)生，并且只能是事件處理函數(shù)內(nèi)部訪問，在所有事件處理函數(shù)運行結(jié)束后，事件對象就被銷毀

上面的定義說的有點復(fù)雜，簡單的我們需要記住事件的event.target這個屬性，event.target代表當(dāng)前觸發(fā)事件的元素，可以通過當(dāng)前元素對象的一系列屬性來判斷是不是我們想要的元素

還是通過一段代碼例子來演示說明,這里的代碼就是上面拓展，大家運行以下就明白了event.target的用法：代碼

其實到了這里我們會發(fā)現(xiàn)這不是和this的功能有點像嗎？其實this和event.target還是有區(qū)別的：js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素；

總結(jié)以下常用的事件對象的屬性和方法：

• event.type：獲取事件的類型
  觸發(fā)元素的事件類型

$("element").click(function(event) {
      alert(event.type); // "click"事件
});

• event.pageX 和 event.pageY：獲取鼠標(biāo)當(dāng)前相對于頁面的坐標(biāo)
• event.preventDefault() 方法：阻止默認(rèn)行為
  這個用的很多,如點擊一個鏈接（a標(biāo)簽），瀏覽器不會跳轉(zhuǎn)到新的 URL 去了。

$("a").click(function(event){
    event.preventDefault();
});

• event.stopPropagation() 方法：阻止事件冒泡
  事件是可以冒泡的，為防止事件冒泡到DOM樹上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)

完！