jQuery事件總結

標籤：cti   右鍵   返回   undefined   bind   elb   接受   開始   執行   

jQuery提供了兩個方法一個是click方法用於監聽使用者單擊操作，另一個方法是dbclick方法用於監聽使用者雙擊操作。

click事件觸發需要以下幾點：

click事件其實是由mousedown與mouseup 2個動作構成，所以點擊的動作只有在鬆手後才觸發。

dblclick事件觸發需要以下幾點：

dblclick又是由2個click疊加而來的，所以dblclick事件只有在滿足以下條件的情況下才能被觸發

滑鼠指標在元素裡面時點擊。
滑鼠指標在元素裡面時釋放。
滑鼠指標在元素裡面時再次點擊，點擊間隔時間，是系統而定。
滑鼠指標在元素裡面時再次釋放。
注意：在同一元素上同時綁定 click 和 dblclick 事件是不可取的。各個瀏覽器事件觸發的順序是不同的，一些瀏覽器在dblclick之前接受兩個 click 事件 ，而一些瀏覽器只接受一個 click 事件。使用者往往可通過不同的作業系統和瀏覽器配置雙擊靈敏度

mousedown事件觸發需要以下幾點：

mousedown強調是按下觸發
如果在一個元素按住了滑鼠不放，並且拖動滑鼠離開這個元素，並釋放滑鼠鍵，這仍然是算作mousedown事件
任何滑鼠按鍵被按下時都能觸發mousedown事件
用event 對象的which區別按鍵，敲擊滑鼠左鍵which的值是1，敲擊滑鼠中鍵which的值是2，敲擊滑鼠右鍵which的值是3
mouseup事件觸發需要以下幾點：

mouseup強調是鬆手觸發，與mousedown是相反的
mouseup與mousedown組合起來就是click事件
如果使用者在一個元素上按下滑鼠按鍵，並且拖動滑鼠離開這個元素，然後釋放滑鼠鍵，這仍然是算作mouseup事件
任何滑鼠按鍵鬆手時都能觸發mouseup事件
用event 對象的which區別按鍵，敲擊滑鼠左鍵which的值是1，敲擊滑鼠中鍵which的值是2，敲擊滑鼠右鍵which的值是3

mousemove事件觸發需要以下幾點：

mousemove事件是當滑鼠指標移動時觸發的，即使是一個像素
如果處理器做任何重大的處理，或者如果該事件存在多個處理函數，這可能造成瀏覽器的嚴重的效能問題

jQuery當中同樣提供了這樣的事件來監聽使用者的移入、移出操作，mouseover()與mouseout()事件

經常需要知道使用者操作滑鼠是否有移到元素內部或是元素外部，因此jQuery提供了一個mouseenter和mouseleave的快捷方法可以監聽使用者移動到內部的操作

mouseenter JavaScript事件是Internet Explorer專有的。由於該事件在平時很有用，jQuery的類比這一事件，以便它可用於所有瀏覽器。該事件在滑鼠移入到元素上時被觸發。任何HTML元素都可以接受此事件。

關鍵點就是：冒泡的方式處理問題！！！

submit事件，監聽下提交表單的這個動作。

 

form元素是有預設提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個預設行為
傳統的方式是呼叫事件對象 e.preventDefault() 來處理， jQuery中可以直接在函數中最後結尾return false即可
jQuery處理如下：

 

$("#target").submit(function(data) {
　　return false; //阻止預設行為，提交表單
});

keydown是在鍵盤按下就會觸發
keyup是在鍵盤鬆手就會觸發

on（bind）推薦on綁定事件   事件委託原理是事件冒泡

（阻止事件冒泡w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true）

（阻止預設行為w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;）

基本用法：.on( events ,[ selector ] ,[ data ] )

委託機制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

卸載事件off()方法
通過.on()綁定的事件處理常式
通過off() 方法移除該綁定

著作權歸作者所有。
商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
連結:http://caibaojian.com/javascript-stoppropagation-preventdefault.html
來源:http://caibaojian.com

event.target代表當前觸發事件的元素，可以通過當前元素對象的一系列屬性來判斷是不是我們想要的元素（事件委託，通過事件對象區別觸發元素）

        <div class="list">
            <ul>
                <li>點擊：觸發第一個li</li>
                <li>點擊：觸發第二個li</li>
                <li>點擊：觸發第三個li</li>
                <li>點擊：觸發第四個li</li>
            </ul>
        </div>
    <script type="text/javascript">
        //多事件綁定一
        $("ul").on(‘click‘,function(e){
           alert(‘觸發的元素是內容是: ‘ + e.target.textContent)//點擊依次彈對應的li
        })
    </script> target 屬性可以是註冊事件時的元素，或者它的子項目。通常用於比較 event.target 和 this 來確定事件是不是由於冒泡而觸發的。經常用於事件冒泡時處理事件委託。

event.type：擷取事件的類型
觸發元素的事件類型
$("a").click(function(event) {
　　alert(event.type); // "click"事件
});

event.pageX 和 event.pageY：擷取滑鼠當前相對於頁面的座標
通過這2個屬性，可以確定元素在當前頁面的座標值，滑鼠相對於文檔的左邊緣的位置（左邊）與 （頂邊）的距離，簡單來說是從頁面左上方開始,即是以頁面為參考點,不隨滑動條移動而變化
event.preventDefault() 方法：阻止預設行為
這個用的特別多，在執行這個方法後，如果點擊一個連結（a標籤），瀏覽器不會跳轉到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個方法是否(在那個事件對象上)被調用過了
event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的，為防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函數
event.which：擷取在按一下滑鼠時，單擊的是滑鼠的哪個鍵
event.which 將 event.keyCode 和 event.charCode 標準化了。event.which也將正常化的按鈕按下(mousedown 和 mouseupevents)，左鍵報告1，中間鍵報告2，右鍵報告3
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() 方法觸發被選元素的指定事件類型

$(selector).trigger(event,[param1,param2,...])

$(selector).trigger(eventObj)（規定事件發生時啟動並執行函數。）

trigger除了能夠觸發瀏覽器事件，同時還支援自訂事件，並且自訂時間還支援傳遞參數

$(‘#ele‘).on(‘say‘, function(event,param1,param2) {
　　alert("自觸自訂時間")
});
trigger觸發瀏覽器事件與自訂事件區別：

自訂事件對象，是jQuery類比原生實現的
自訂事件可以傳遞參數

trigger事件還有一個特性：會在DOM樹上冒泡，所以如果要阻止冒泡就需要在事件處理常式中返回false或呼叫事件對象中的.stopPropagation() 方法可以使事件停止冒泡

triggerHandler與trigger的用法是一樣的，不同之處：

triggerHandler不會觸發瀏覽器的預設行為，.triggerHandler( "submit" )將不會調用表單上的.submit()
.trigger() 會影響所有與 jQuery 對象相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素
使用 .triggerHandler() 觸發的事件，並不會在 DOM 樹中向上冒泡。 如果它們不是由目標元素直接觸發的，那麼它就不會進行任何處理
與普通的方法返回 jQuery 對象(這樣就能夠使用鏈式用法)相反，.triggerHandler() 返回最後一個處理的事件的傳回值。如果沒有觸發任何事件，會返回 undefined

 

jQuery事件總結