jQueryイベントの使い方まとめexamples_jquery

この記事では、jQuery でのイベントの使用法を例とともに詳しくまとめており、jQuery を学習する際の参考になります。皆さんの参考に共有してください。具体的な使い方は以下の通りです:

1. メソッド名を使用してイベントを要素にバインドします:

$('li').click(function(event){})

2. バインド メソッドを使用してイベントを要素にバインドします:

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

bind を通じて、複数のイベントを要素にバインドできることがわかります。

3. イベント名前空間

イベント名前空間が必要なのはなぜですか?

→最初に 2 つのクリックイベントを li 要素にバインドするとします。

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

→次に、クリック イベントの 1 つをログアウトする必要があります。これは次のように記述できます:

$('li').unbind('click')

しかし、この方法では、li 内のすべてのクリック イベントがログアウトされます。これは私たちが望んでいることではありません。イベント名前空間を使用すると、この問題を解決できます。イベント名前空間が必要な理由は、イベントをログオフするときに便利だからです。

イベント名前空間を使用するには?
→イベントを要素にバインドする場合は、イベント名.名前空間名の形式に従って、イベント名の後に名前空間を追加します。

$('li')
 .bind('click.editMode',function(event){})
 .bind('click.displayMode',function(event){}) 

→イベントからログアウトする場合は、次のように記述できます:

$('li').unbind('click.editMode')

4. イベントの種類

ぼかし
変更

をクリックしてください dblclick
エラー
フォーカス
フォーカスイン
フォーカスアウト
キーダウン
キーを押す
キーアップ
ロード
マウスダウン
マウス入力
マウス離れる
マウス移動
マウスアウト
マウスオーバー
マウスアップ
準備完了
サイズ変更
スクロール

を選択してください 送信
アンロード

5.1 つのメソッド

1 回限りのイベントを作成するために使用されます。このイベントは一度実行されると自動的に削除されます。

$("p").one("click",function(){
 $(this).animate({fontSize: "+=6px"});
})

6. イベントを削除します

//先给元素添加事件
$("p").click(function(){
 $(this).slideToggle();
})
//再把元素的事件删除
$("button").click(function(){
 $("p").unbind();
})

7.イベント属性

実際には、これは jQuery のグローバル プロパティである jQuery.Event です。イベントがトリガーされるたびに、Event オブジェクトのインスタンスがイベント ハンドラーに渡されます。

イベントは、Event コンストラクターを通じて作成およびトリガーできます。

var e = jQueery.Event("click")
jQuery("body").trigger(e);

コンストラクターを介してイベント内の匿名オブジェクトを渡すこともできます。

var e = jQuery.Event("keydown", {keyCode : 64});
jQuery("body").trigger(e);

使用すると、event.data.KeyCode を通じて匿名オブジェクトの値を取得します。

jQuery.Event のコンストラクターを介して Event で匿名オブジェクトを渡すことができます。それだけでなく、イベントを通じて匿名オブジェクトを渡すこともできます。

$("p").click({param1 : "Hello", param2 : "World"}, someFunction);
function someFunction(event){
 alert(event.data.param1);
 alert(event.data.param2);
}

匿名オブジェクトのキーは、event.data を通じて取得できることがわかります。

イベント オブジェクト インスタンスを通じて、次のような情報の他の側面も取得できます。

$("p").click(function(event){
 alert(event.target.nodeName);
})

上記では、event.target.nodeName を通じてイベントをトリガーした要素の名前を取得します。

jQuery.Event のその他のプロパティは次のとおりです:

altKey alt キーが押された場合は True、Mac キーボードでは、alt キーに Option
がマークされます。 ctrKey Ctrl キーが押されました
ShiftKey Shift キーが押されました
currentTarget バブリングステージの現在の要素
データ
メタキー 一般的にメタキーは Ctrl ですが、Mac では Command キー
です。 pageX マウス イベント中のページの原点を基準としたカーソルの水平座標
pageY マウスイベント
中のページの原点を基準としたカーソルの垂直座標 関連ターゲット マウス イベントがトリガーされたときにカーソルが出入りする要素
screenX マウス イベント
中の画面原点を基準としたカーソルの水平座標 screenY マウスイベント中の画面の原点を基準としたカーソルの垂直座標
結果は、前のイベント ハンドラーからの最新の未定義の値を返します
イベントをトリガーするターゲット要素
timestamp jQuery.Event インスタンスが作成されたときのタイムスタンプ (ミリ秒単位)
type イベントタイプ (click
など) キーボード イベントの場合は、キーの番号を表します。マウス イベントの場合は、左ボタン、中ボタン、または右ボタンが押されたかどうかを記録します

8.イベントメソッド

event.preventDefault() はデフォルトの動作を防止します
event.stopPropgation() は「バブリング」を停止します。つまり、DOM のさらに上の伝播を停止します
events.stopImmediatePropagation() はすべてのイベントのさらなる伝播を停止します
イベント.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()

9.live メソッドと on メソッド

このメソッドを使用すると、まだ存在しない要素のイベントを作成できます。バインド メソッドとの違いは、一致するすべての要素にイベントをバインドできることと、設定はまだ存在せず、動的に作成する必要がある要素であることです。さらに、ライブ メソッドは、必ずしも $(function(){}) Ready ハンドラーに配置する必要はありません。 jQuery 1.7以降はonメソッドに変更されました。

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

イベント登録をキャンセルしたい場合:

$("button").click(function(){
 $("p").off("click");
})

10.トリガーメソッド

トリガー メソッドは、要素にバインドされたイベントを手動でトリガーする場合に使用できます。

$("#foo").on("click",function(){
 alert($(this).text());
})
$("#foo").trigger("click");

还可以在绑定事件的时候出传入形参，在trigger事件的时候传入实参。

$("#foo").on("custom", function(event, param1, param2){
 alert(param1 + "\n" + param2)
})
$("#foo").trigger("custom",["Custom","Event"]);

trigger触发由jQuery.Event创建的实例：

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

甚至可以在trigger触发方法的时候传入匿名对象：

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

如果想停止触发事件的传播，可通过jQuery.Event实例的stopPropgation()方法，或在任何事件中返回false。

11.triggerHandler方法

triggerHandler方法与trigger方法的不同之处在于：triggerHandler方法不会执行元素的默认事件，也不会"冒泡"。

//给一个元素绑定一个focus事件
$("input").focus(function(){
 $("<span>Focused</span>").appendTo("#id").fadeOut(1000);
})
//用triggerHandler触发
$("#id").click(function(){
 $("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框
})
//用trigger触发
$("#id").click(function(){
 $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})

12.事件冒泡和事件委托

什么是事件冒泡？

有这么一段代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
 <div>
  <p><a href="#foo"><span>I am a Link!</span></a></p>
  <p><a href="#bar"><b><i>I am another Link!</i></b></a></p>
 </div>
</body>
</html>

现在，给该页面所有的元素绑定click事件，包括window和document。

  $(function () {
   $('*').add([document, window]).on('click', function(event) {
    event.preventDefault();
    console.log(this);
   });
  });

当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window。

如何阻止事件冒泡？

显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。

  $(function () {
   $('a').on('click', function(event) {
    event.preventDefault();
    console.log($(this).attr('href'));
   });
  });

以上，只为a绑定了click事件，无它。

如何有效利用事件冒泡？

在jquery中，事件委托却很好地利用了事件冒泡。

<html>
<body>
<div id="container">
 <ul id="list">
  <li><a href="http://domain1.com">Item #1</a></li>
  <li><a href="/local/path/1">Item #2</a></li>
  <li><a href="/local/path/2">Item #3</a></li>
  <li><a href="http://domain4.com">Item #4</a></li>
 </ul>
</div>
</body>
</html>

现在，我们想给现有li中的a标签绑定事件，这样写：

$( "#list a" ).on( "click", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

但是，如果又在现有的ul中添加新的li和a，那情况又如何呢？

$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );

结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？

如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为。

$( "#list" ).on( "click", "a", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a

事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的。

13.toggle方法

允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件。

$('img[src*=small]').toggle({
 function(){},
 function(){},
 function(){}
});

14.mouseenter和mouseleave方法

$(element).mouseenter(function(){}).mouseleave(function(){})

15.hover方法

$("p").hover(function(){
 $("p").css("background-color","yellow");
 },function(){
 $("p").css("background-color","pink");
});

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。