jQuery中的事件詳解

Posted on by

一、概述：

當用戶與瀏覽器進行交互時這些方法被用於註冊行為生效，並進一步處理這些註冊行為。

二、綁定事件處理器

1、.on()：

在選定的元素上綁定一個或多個事件處理函數。

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

Example1: 當點擊段落時，顯示該段落中的文本：

$("p").on("click", function(){
  alert( $(this).text() );
});

Example2: 向事件處理函數中傳入數據，並且在事件處理函數中通過名字來獲取傳入的數據：

function myHandler(event) {
  alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

Example3: 取消表單的提交動作，並且通過返回 false 的方法來防止事件冒泡：

$("form").on("submit", false)

Example4: 通過使用 .preventDefault()，僅取消默認的動作。

$("form").on("submit", function(event) {
  event.preventDefault();
});

Example5: 通過使用 .stopPropagation()，防止提交事件的冒泡行為，但是並不禁止提交行為。

$("form").on("submit", function(event) {
  event.stopPropagation();
});

Example6: 添加並觸發自定義事件（非瀏覽器事件）。

$("p").on("myCustomEvent",function(event,myName){
 $(this).text(myName+",hithere!");
 $("span")
  .stop()
  .css("opacity",1)
  .text("myName="+myName)
  .fadeIn(30)
  .fadeOut(1000);
});
$("button").click(function(){
 $("p").trigger("myCustomEvent",["John"]);
});

Example7: 使用 對象 同時添加多個事件處

$("div.test").on({
  click: function(){
    $(this).toggleClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

2、.one():

為元素的事件添加處理函數。處理函數在每個元素上每種事件類型最多執行一次。

  • .one( events [, data ], handler(eventObject) )
  • .one( events [, selector ] [, data ], handler(eventObject) )

Example1: 為每個 div 綁定一次性 click 事件。

var n = 0;
$( "div" ).one( "click", function() {
  var index = $( "div" ).index( this );
  $( this ).css({
    borderStyle: "inset",
    cursor: "auto"
  });
  $( "p" ).text( "Div at index #" + index + " clicked." +
    " That's " + (++n) + " total clicks." );
});

Example2: 在每個段落上第一次點擊時，顯示該段落的內容：

$( "p" ).one( "click", function() {
  alert( $( this ).text() );
});

Example3: 處理函數在每個元素上每種事件類型隻執行一次。

var n = 0;
$(".target").one("click mouseenter", function() {
  $(".count").html(++n);
});

3、.off()：

移除一個事件處理函數。

.off( events [, selector ] [, handler(eventObject) ] )

Example1: 為有顏色的按鈕添加並移除事件處理。

function flash() {
  $( "div" ).show().fadeOut( "slow" );
}

$( "#bind" ).click(function() {
  $( "body" )
    .on( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Can Click!" );
});

$( "#unbind" ).click(function() {
  $( "body" )
    .off( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Does nothing..." );
});

Example2: 移除所有段落上的事件：

$( "p" ).off();

Example3: 移除所有段落上的代理事件：

$( "p" ).off( "click", "**" );

Example4: 通過傳入的第三個參數，僅移除先前綁定的事件處理函數：

var foo = function() {
  // Code to handle some kind of event
};
 
// ... Now foo will be called when paragraphs are clicked ...
$( "body" ).on( "click", "p", foo );
 
// ... Foo will no longer be called.
$( "body" ).off( "click", "p", foo );

Example5: 通過指定名字空間，解除綁定表單上所有的代理事件：

var validate = function() {
  // Code to validate form entries
};
 
// Delegate events under the ".validator" namespace
$( "form" ).on( "click.validator", "button", validate );
 
$( "form" ).on( "keypress.validator", "input[type='text']", validate );
 
// Remove event handlers in the ".validator" namespace
$( "form" ).off( ".validator" );

4、.trigger():

觸發被選元素的指定事件類型。

.trigger( eventType [, extraParameters ] ) 
Example1: 點擊 button #2 時，同時觸發 button #1 的點擊事件。

$( "button" ).first().click(function() {
  update( $( "span" ).first() );
});
 
$( "button" ).last().click(function() {
  $( "button" ).first().trigger( "click" );
  update( $( "span" ).last() );
});
 
function update( j ) {
  var n = parseInt( j.text(), 10 );
  j.text( n + 1 );
}

Example2: 若要提交第一個表單但又不想使用 submit() 函數，請嘗試如下方法：

$("form:first").trigger("submit")

Example3: 若要提交第一個表單但又不想使用 submit() 函數，請嘗試如下方法：

var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

Example4: 向事件中傳入任意的數據：

$( "p" )
  .click(function( event, a, b ) {
    // When a normal click fires, a and b are undefined
    // for a trigger like below a refers to "foo" and b refers to "bar"
  })
  .trigger( "click", [ "foo", "bar" ] );

Example5: 通過 event 對象，向事件中傳入任意的數據：

var event = jQuery.Event( "logged" );
event.user = "foo";
event.pass = "bar";
$( "body" ).trigger( event );

Example6: 另外一種通過 event 對象傳入數據的方法：

$( "body" ).trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});

5、.triggerHandler()：

一個事件執行附加到元素的所有處理程序。

.triggerHandler( eventType [, extraParameters ] )

如果您使用 .triggerHandler() 觸發 focus 事件，那麼它隻會觸發綁定瞭該事件的處理函數，而瀏覽器的默認 focus 動作是不會被觸發的。

$( "#old" ).click(function() {
  $( "input" ).trigger( "focus" );
});
$( "#new" ).click(function() {
  $( "input" ).triggerHandler( "focus" );
});
$( "input" ).focus(function() {
  $( "Focused!" ).appendTo( "body" ).fadeOut( 1000 );
});

6、jQuery.proxy()：

接受一個函數，然後返回一個新函數，並且這個新函數始終保持瞭特定的上下文語境。

  • jQuery.proxy( function, context [, additionalArguments ] )
  • jQuery.proxy( context, name [, additionalArguments ] )

Example1: 修改使用參數為"function, context"的jQuery.proxy()方法綁定的點擊事件的上下文語境。並且在第一次點擊事件執行後，解除原先的綁定。

var me = {
  type: "zombie",
  test: function( event ) {
    // Without proxy, `this` would refer to the event target
    // use event.target to reference that element.
    var element = event.target;
    $( element ).css( "background-color", "red" );
 
    // With proxy, `this` refers to the me object encapsulating
    // this function.
    $( "#log" ).append( "Hello " + this.type + "
" );
    $( "#test" ).off( "click", this.test );
  }
};
 
var you = {
  type: "person",
  test: function( event ) {
    $( "#log" ).append( this.type + " " );
  }
};
 
// Execute you.test() in the context of the `you` object
// no matter where it is called
// i.e. the `this` keyword will refer to `you`
var youClick = $.proxy( you.test, you );
 
// attach click handlers to #test
$( "#test" )
  // this === "zombie"; handler unbound after first click
  .on( "click", $.proxy( me.test, me ) )
 
  // this === "person"
  .on( "click", youClick )
 
  // this === "zombie"
  .on( "click", $.proxy( you.test, me ) )
 
  // this === "element"
  .on( "click", you.test );

Example2: 通過調用參數為"context, function name"的jQuery.proxy()方法，強制修改函數的上下文語境。 並且在第一次點擊事件執行後，解除綁定。

var obj = {
  name: "John",
  test: function() {
    $( "#log" ).append( this.name );
    $( "#test" ).off( "click", obj.test );
  }
};
$( "#test" ).on( "click", jQuery.proxy( obj, "test" ) );

Example3: 更改綁定點擊處理程序函數的上下文。

var me = {
  // I'm a dog
  type: "dog",
  // Note that event comes *after* one and two
  test: function( one, two, event ) {
    $( "#log" )
       // `one` maps to `you`, the 1st additional
      // argument in the $.proxy function call
      .append( "Hello " + one.type + ":"）// The `this` keyword refers to `me`
      // (the 2nd, context, argument of $.proxy)
      .append( "I am a " + this.type + ", " )
 
      // `two` maps to `they`, the 2nd additional
      // argument in the $.proxy function call
      .append( "and they are " + two.type + "." )
 
      // The event type is "click"
      .append( "Thanks for " + event.type + "ing." )
 
      // The clicked element is `event.target`,
      // and its type is "button"
      .append( "the " + event.target.type + "." );
  }
};
 
var you = { type: "cat" };
var they = { type: "fish" };
 
// Set up handler to execute me.test() in the context
// of `me`, with `you` and `they` as additional arguments
var proxy = $.proxy( me.test, me, you, they );
 
$( "#test" )
  .on( "click", proxy );

三、瀏覽器事件

1、.resize():

為 JavaScript 的 "resize" 事件綁定一個處理函數，或者觸發元素上的該事件。

.resize( [eventData ], handler(eventObject) )

當窗口大小改變時（或改變後），查看窗口的寬度：

$(window).resize(function() {
  $('body').prepend('' + $(window).width() + '');
});

2、.scroll():

為 JavaScript 的 "scroll" 事件綁定一個處理函數，或者觸發元素上的該事件。

.scroll( [eventData ], handler(eventObject) )

在頁面滾動時觸發一系列動作：

$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$(window).scroll(function () {
  $("span").css("display", "inline").fadeOut("slow");
});

四、文檔加載

1 .ready(handler)

返回: jQuery：當DOM準備就緒時，指定一個函數來執行。

可以在同一個頁面中無限次地使用$(document).ready()事件。其中註冊的函數會按照（代碼中的）先後順序依次執行。

顯示當DOM加載的信息。

ready() 方法通常用於一個匿名函數：

$( document ).ready(function() {
  // Handler for .ready() called.
});

代碼：

$(function() {
    $("p" ).text( "The DOM is now loaded and can be manipulated." );
});

2、$.holdReady():

暫停或恢復.ready() 事件的執行。

延遲就緒事件，直到已加載的插件。

$.holdReady( true );
$.getScript( "myplugin.js", function() {
  $.holdReady( false );
});

3、$.ready:

一個類似於promise的對象(或“thenable”)，它在文檔準備好時解析。

ready(), 它就是使用瞭這個對象。

Example1:使用jQuery.when監聽準備好的文檔。

$.when( $.ready ).then(function() {
  // Document is ready.
});

Example2:典型的用法涉及到另一個promise，使用jQuery.when。

$.when(
  $.getJSON( "ajax/test.json" ),
  $.ready
).done(function( data ) {
  // Document is ready.
  // Value of test.json is passed as `data`.
});

五、表單事件

1、.blur():

為 "blur" 事件綁定一個處理函數，或者觸發元素上的 "blur" 事件（註：此事件不支持冒泡）。

2、.change( [eventData ], handler )

為JavaScript 的 "change" 事件綁定一個處理函數，或者觸發元素上的 "change" 事件。

Example1: 為 select 元素添加 change 事件，將選中的項目顯示在 div 中。

$("select").change(function () {
  var str = "";
  $("select option:selected").each(function () {
            str += $(this).text() + " ";
  });
  $("div").text(str);
})
.change();

Example2: 所有文本輸入元素添加一個的有效性測試:

$("input[type='text']").change( function() {
  // check input ($(this).val()) for validity here
});

3、其他表單事件

  • .focus():為 JavaScript 的 "focus" 事件綁定一個處理函數，或者觸發元素上的 "focus" 事件。
  • .focusin():將一個事件函數綁定到"focusin" 事件。
  • .focusout():將一個事件函數綁定到"focusout" 事件。
  • .select():為 JavaScript 的 "select" 事件綁定一個處理函數，或者觸發元素上的該事件。
  • .submit():為 JavaScript 的 "submit" 事件綁定一個處理函數，或者觸發元素上的該事件。 
    .submit( [eventData ], handler(eventObject) )

Example1: 如果你想根據一個標識來阻止表單被提交的話，可以像下面這樣做：

$("form").submit(function() {
  if ($("input:first").val() == "correct") {
    $("span").text("Validated...").show();
    return true;
  }
  $("span").text("Not valid!").show().fadeOut(1000);
  return false;
});

Example2: 如果你想根據一個標識來阻止表單被提交的話，可以像下面這樣做：

$("form").submit( function () {
  return this.some_flag_variable;
} );

Example3: 觸發頁面上第一個表單的提交事件：

$("form:first").submit();

六、鍵盤事件

  • .keydown():為 "keydown" 事件綁定一個處理函數，或者觸發元素上的 "keydown" 事件。
  • .keypress():為 "keypress" 事件綁定一個處理函數，或者觸發元素上的 "keypress" 事件。
  • .keyup():為 "keyup" 事件綁定一個處理函數，或者觸發元素上的 "keyup" 事件。 
    .keyup( [eventData ], handler(eventObject) )

當在文本框中松開一個按鍵時，顯示 keyup 事件的 event 對象。(使用一個簡單的 $.print 插件)。

var xTriggered = 0;
$('#target').keyup(function(event) {
   xTriggered++;
   var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
  $.print(msg, 'html');
  $.print(event);
}).keydown(function(event) {
  if (event.which == 13) {
    event.preventDefault();
  }
});
 
$('#other').click(function() {
  $('#target').keyup();
});

七、鼠標事件

1、.click()：

為 JavaScript 的"click" 事件綁定一個處理器，或者觸發元素上的 "click" 事件。

.click( [eventData ], handler(eventObject) )

Example1: 點擊段落時隱藏他們：

$("p").click(function () {
    $(this).slideUp();
});

Example2: 在頁面上所有段落上觸發click事件。

$("p").click();

2、其他鼠標事件

  • .contextmenu()：為 JavaScript 的"contextmenu" 事件綁定一個處理器，或者觸發元素上的 "contextmenu" 事件。
  • .dblclick()：為JavaScript 的 "dblclick" 事件綁定一個處理函數，或者觸發元素上的 "dblclick" 事件。
  • .hover()：將二個事件函數綁定到匹配元素上，分別當鼠標指針進入和離開元素時被執行。將一個單獨事件函數綁定到匹配元素上，分別當鼠標指針進入和離開元素時被執行。
  • .mousedown()：為 JavaScript 的 "mousedown" 事件綁定一個處理函數，或者觸發元素上的該事件。
  • .mouseenter()：為 mouse enters（鼠標進入） 事件綁定一個處理函數，或者觸發元素上的 mouse enters（鼠標進入） 事件。
  • .mouseleave()：為 mouse leaves（鼠標離開） 事件綁定一個處理函數，或者觸發元素上的 mouse leaves（鼠標離開） 事件。
  • .mousemove()：為 JavaScript 的 "mousemove" 事件綁定一個處理函數，或者觸發元素上的該事件。
  • .mouseout()：為 JavaScript 的 "mouseout" 事件綁定一個處理函數，或者觸發元素上的該事件。（註：支持事件冒泡）
  • .mouseover()：為 JavaScript 的 "mouseover" 事件綁定一個處理函數，或者觸發元素上的該事件。（註：支持事件冒泡）
  • .mouseup()：為 JavaScript 的 "mouseup" 事件綁定一個處理函數，或者觸發元素上的該事件。

八、事件對象

1、屬性列表：

  • metaKey：表示事件觸發時哪個Meta鍵被按下。
  • pageX、pageY：鼠標相對於文檔的左邊緣、頂部邊緣的位置（坐標）。
  • relatedTarget：在事件中涉及的其它任何DOM元素。
  • target：觸發事件的DOM元素。
  • which：針對鍵盤和鼠標事件，這個屬性能確定你到底按的是哪個鍵。
  • type：描述事件的性質。
  • currentTarget：在事件冒泡過程中的當前DOM元素。
  • data：當當前正在執行的處理程序綁定時，一個可選的數據對象傳遞給一個事件方法。
  • delegateTarget：綁定瞭當前正在調用jQuery 事件處理器的元素。
  • namespace：當事件被觸發時此屬性包含指定的命名空間。
  • result：事件被觸發的一個事件處理程序的最後返回值，除非值是 undefined。
  • timeStamp：這個屬性返回事件觸發時距離1970年1月1日的毫秒數。

某些事件可能有它們特定的屬性。 那些屬性可以存取在event.originalEvent對象上。

// add the dataTransfer property for use with the native `drop` event
// to capture information about files dropped into the browser window
jQuery.event.props.push( "dataTransfer" );

2、函數列表:

  • event.isDefaultPrevented()：根據事件對象中是否調用過 event.preventDefault() 方法,來返回一個佈爾值。
  • event.isImmediatePropagationStopped()：根據事件對象中是否調用過 event.stopImmediatePropagation() 方法,來返回一個佈爾值。
  • event.isPropagationStopped()：根據事件對象中是否調用過 event.stopPropagation() 方法,來返回一個佈爾值。
  • event.preventDefault()：如果調用這個方法，默認事件行為將不再觸發。
  • event.stopImmediatePropagation()：阻止剩餘的事件處理函數執行並且防止事件冒泡到DOM樹上。
  • event.stopPropagation()：防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函數。

記錄按鍵：

$('#whichkey').bind('keydown',function(e){
  $('#log').html(e.type + ': ' +  e.which );
});

到此這篇關於jQuery事件的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：