jQuery-事件

• event handler 事件句柄；事件處理程序

鼠標事件：

• click() 單擊

dblclick() 雙擊事件

能夠傳遞參數，或者不傳遞$ele.click( [eventData ], handler(eventObject) )

$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數據
});

　　

• mousedown() 能夠監聽用戶鼠標按下的操做，與其對應的還有一個方法mouseup快捷方法能夠監聽用戶鼠標彈起的操做.

用event 對象的which區別按鍵，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3

mouseup與mousedown組合起來就是click事件

$("#test").mousedown(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數據
});

• 　mousemove() 監聽用戶移動的的操做

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

• 　　mouseover()與mouseout()事件，監聽用戶的移入移出操做，

var n = 0;
        //綁定一個mouseover事件
        $(".aaron1 p:first").mouseover(function(e) {
            $(".aaron1 a").html('進入元素內部,mouseover事件觸發次數：' + (++n))
        })

<div id="test">點擊觸發<div>

$("#test").mouseover(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數據
});

　　

• mouseenter和mouseleave 知道用戶操做鼠標是否有移到元素內部或是元素外部，
  mouseover會冒泡，

  mouseenter事件只會在綁定它的元素上被調用，而不會在後代節點上被觸發

 $(".aaron2 p").mouseenter(function(e) {
            $(".aaron2 a:first").html('mouseenter事件觸發次數：' + (++i))
        })

•  hover 移進移出

$(selector).hover(handlerIn, handlerOut)

　　handlerIn(eventObject)：當鼠標指針進入元素時觸發執行的事件函數

　　handlerOut(eventObject)：當鼠標指針離開元素時觸發執行的事件函數

// hover()方法是同時綁定 mouseenter和 mouseleave事件。
    // 咱們能夠用它來簡單地應用在 鼠標在元素上行爲
    $("p").hover(
        function() {
            $(this).css("background", 'red');
        },
        function() {
            $(this).css("background", 'yellow');
        }
    );

• focusin() 元素得到焦點的時候觸發，如input，用戶在點擊聚焦的時候，若是開發者須要捕獲這個動做的時候，jQuery提供了一個focusin事件　　

 //input聚焦
        //給input元素增長一個邊框
        $("input:first").focusin(function() {
             $(this).css('border','2px solid red')
        })

　　

• focusout() 元素失去焦點的時候使用

表單事件

• focus()， blur() 在元素自己產生，不支持冒泡。focusin()在元素包含的元素中產生，支持冒泡。focusin裏面的元素有焦點時，冒泡到上級元素，尋找事件。

//點擊裏面包含的元素纔有做用,寫成focus沒有用
$(".aaron").focusin(function() {
        $(this).css('border', '2px solid red')
    })

• 　　change()，監聽<input>元素，<textarea>和<select>元素的值發生改變, 失去焦點時觸發

//監聽input值的改變
    $('.target1').change(function(e) {
        $("#result").html(e.target.value)
    });

• select（）事件，用於<input>元素與<textarea>元素，元素中的文本被選擇時

 //監聽textarea元素中value的選中
    $('textarea').select(function(e) {
        alert(window.getSelection().toString());//非IE內核瀏覽器能夠用這種方法，考慮兼容性的話你能夠用getselectionstart()和getselectionend()
    });

//alert(e.target.value.substring(e.currentTarget.selectionStart,e.currentTarget.selectionEnd));

• submit() 監聽提交動做，（例如：驗證表單輸入的正確性，若是錯誤就阻止提交，重新輸入）

 具體能觸發submit事件的行爲：

<input type="submit">

<input type="image">

<button type="submit">

當某些表單元素獲取焦點時，敲擊Enter（回車鍵）

$('#target2').submit(function() {
        alert('捕獲提交表達動做,阻止頁面跳轉')
        return false;
    });

　　鍵盤事件

• keydown與keyup 監聽鍵盤按下與鬆手. 支持中文

//監聽鍵盤按鍵
    //獲取輸入的值
    $('.target1').keydown(function(e) {
        $("em:first").text(e.target.value)
    });

　　keydown 是在按以前判斷（當時text尚未內容），觸發一次空，當下一次按鍵時，就觸發上一次輸入的內容，因此就少一個。按下的一瞬間時 文字尚未輸入到文本框因此第一次下邊獲取不到這個值。簡單點說文字輸入進去文本框這個行爲要慢於keydown事件。

• keypress() 不接收中文字符，相似於keydown(), 主要用來接收字母、數字等ANSI字符，而 KeyDown 和 KeyUP 事件過程能夠處理任何不被 KeyPress 識別的擊鍵。諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。

 

on()的多事件綁定

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

 

事件機制委託的機制

• 經過.on()綁定的事件處理程序
• 經過off() 方法移除該綁定

事件對象，e.target 

event.target

target 屬性能夠是註冊事件時的元素，或者它的子元素。一般用於比較 event.target 和 this 來肯定事件是否是因爲冒泡而觸發的。常常用於事件冒泡時處理事件委託

簡單來講：event.target表明當前觸發事件的元素，能夠經過當前元素對象的一系列屬性來判斷是否是咱們想要的元素

• event.pageX 和 event.pageY：獲取鼠標當前相對於頁面的座標
• event.preventDefault() 方法：阻止默認行爲
• event.stopPropagation() 方法：阻止事件冒泡
• event.which：獲取在鼠標單擊時，單擊的是鼠標的哪一個鍵
• event.currentTarget : 在事件冒泡過程當中的當前DOM元素。冒泡前的當前觸發事件的DOM對象, 等同於this.

 

this和event.target的區別：

js中事件是會冒泡的，因此this是能夠變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；

.this和event.target都是dom對象

若是要使用jquey中的方法能夠將他們轉換爲jquery對象。好比this和$(this)的使用、event.target和$(event.target)的使用.

 

• trigger() 根據綁定到匹配元素的給定的事件類型執行全部的處理程序和行爲

• triggerHandler與trigger的用法是同樣的，重點看不一樣之處：

triggerHandler不會觸發瀏覽器的默認行爲，.triggerHandler( "submit" )將不會調用表單上的.submit()

.trigger() 會影響全部與 jQuery 對象相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素

使用 .triggerHandler() 觸發的事件，並不會在 DOM 樹中向上冒泡。 若是它們不是由目標元素直接觸發的，那麼它就不會進行任何處理

與普通的方法返回 jQuery 對象(這樣就可以使用鏈式用法)相反，.triggerHandler() 返回最後一個處理的事件的返回值。若是沒有觸發任何事件，會返回 undefined

 

    //給input綁定一個聚焦事件
    $("input").on("focus",function(event,title) {
        $(this).val(title)
    });

    $("#accident").on("click",function() {
        alert("trigger觸發的事件會在 DOM 樹中向上冒泡");
    });
    //trigger觸發focus
    $("button:first").click(function() {
        $("a").trigger("click");
        $("input").trigger("focus");
    });

    //triggerHandler觸發focus
    $("button:last").click(function() {
        $("a").triggerHandler("click");
        $("input").triggerHandler("focus","沒有觸發默認聚焦事件");
    });