jQuery日本語リファレンス

ヌー

Events/jQuery.Event

jQueryのイベントシステムは、W3C標準に準拠した実装になっています。イベントオブジェクトはjQueryのイベントハンドラーに確実に渡されます。(コールバック関数に引数として渡されず、window.eventなどから取得するタイプのブラウザであっても、そのようなチェックは必要ありません)
オリジナルのイベントオブジェクトが持つ殆どのプロパティは、このオブジェクトにコピーされます。

jQuery.Event

このオブジェクトのコンストラクタも公開されており、triggerを呼ぶ際に用いられます。
コンストラクタではありますが、newオペレータはあってもなくても構いません。

どういった場面でEventオブジェクトを作成するのかは、trigger関数のドキュメントを参照して下さい。

Example:
jQuery.Eventを new をつけずに作成する

var e = jQuery.Event("click");

Example:
jQuery.Eventを new をつけて作成する

var e = new jQuery.Event("click");

Attribute

jQuery.Eventオブジェクトの属性値には、以下のようなものがあります。

event.type

イベントの種類を表す文字列です。

Example:

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

[click]

event.target

イベント処理の対象となるDOM要素です。
これはイベントの発生源となった要素や、その子要素とする場合が多いでしょう。

InternetExplorerやSafariなどでも、同じ書式で取得できます。

Example:

$("a[href=http://www.homes.co.jp]").click(function(event){
 alert(event.target.href);
});

[HOME'S]

Example:
簡単なイベント委譲を用います。
ul要素のclickイベントにハンドラを追加します。イベントはバブリングされるので、子要素であるliのclick時にもイベントが発生します。ハンドラでは要素がliだった場合に、アラートを出すようにしています。

<ul>
<li>ここは全てli要素</li>
<li>この要素の<b>ここ</b>はb要素</li>
<li><span>ここは全てliではなく、span要素</span></li>
<ul>

function sampleTargetHandler(event){
 var target = $(event.target);
 if(target.is("li")){
 alert(target.html());
 }
}
$("ul").click(sampleTargetHandler);

• ここは全てli要素
• この要素のここはb要素
• ここは全てliではなく、span要素

event.relatedTarget

マウス移動系のイベントにおいて、該当要素にマウスが乗る直前に示していた要素、或いはマウスが出て行って乗った要素を返します。

Example:

$("div").mouseout(function(event){
 alert(event.relatedTarget);
});

[mouse on me!]

mouseover時のrelatedTarget:

mouseout時のrelatedTarget:

event.currentTarget

イベントのバブリングが行われている際に、ポインタが現在示している要素を返します。
これはすなわち、イベントハンドラ内のthisと同じ要素を指すことになります。

Example:

<p>ここをクリックしても、太字部分を<b>クリック<b>しても、結果は常に「<b>p<b>」<p>

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

[ここをクリックしても、太字部分をクリックしても、結果は常に「p」]

event.pageX/Y

pageXおよびpageYは、文書内の相対座標を示します。

IEにおける不具合も補正されています。

Example:

$("a").click(function(event){
 alert(event.pageX + ":" + event.pageY);
});

[click]

event.result

イベントハンドラより返された、最後の値です。(undefinedにはなりません)

Example:
同じ要素のクリックイベントに、複数のハンドラを設定します。
最初のハンドラが戻り値返し、次のイベントがその値を表示します。

$("p").click(function(event){
 return "hey";
});
$("p").click(function(event){
 alert(event.result);
});

[click]

event.timeStamp

イベントが作成された時間を返します。精度はミリ秒単位です。

Example:
クリックの押された間隔をミリ秒単位で表示します。

var last;
$("p").click(function(event){
 if(last) alert(event.timeStamp - last);
 last = event.timeStamp;
});

最初の1クリックは、何も表示されません。

[click]

Methods

event.preventDefault()

ブラウザが最初から持っているアクションを中断させる場合に用います。
イベントオブジェクトに対して、既にこのイベントが呼ばれているかを確認するには、isDefaultPrevented()関数を使います。

Example:
アンカーのクリックイベントで、初期動作(この場合はページ遷移)を中止します。

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

[jQuery official]

event.isDefaultPrevented()

既にevent.preventDefault()が呼ばれているかを返します。

Example:

$("a").click(function(event){
 alert('1: '+event.isDefaultPrevented());
 event.preventDefault();
});
$("a").click(function(event){
 alert('2: '+event.isDefaultPrevented());
});

[jQuery official]

event.stopPropagation()

イベントのバブリングを中止します。
イベントの発生通知は親の要素に伝播していきますが、それを止めてしまうのがこの関数です。

ただ、この関数は同じ要素の他のハンドラへのイベント通知は妨げません。
この関数が呼ばれたハンドラより後に登録された他のコールバック関数も、全て呼び出されることになります。
これはtriggerで呼び出されるカスタムイベントであっても同様です。

この関数が既に呼び出されているかどうかを知るには、isPropagationStopped()関数を用います。

Example:
親子要素それぞれに、タグ名を表示するイベントを設定します。
本来であれば「SPAN」「DIV」と続けて表示されるはずですが、バブリングが止まるので「DIV」のアラートは出ません。

<div id="sample-stoppropagation"><span id="sample-stoppropagation-in">[click]</span></div>

$("span").click(function(event){
 alert(this.tagName);
 event.stopPropagation();
});
$("div").click(function(event){
 alert(this.tagName);
});

[click]

event.isPropagationStopped()

既にstopPropagation()関数が呼ばれているかどうかを返します。

Example:

$("p").click(function(event){
 alert(event.isPropagationStopped());
 event.stopPropagation();
 alert(event.isPropagationStopped());
});

[click]

event.stopImmediatePropagation()

この関数が呼び出されて以降のハンドラを、全て実行しないようにします。
これは併せてstopPropagation()関数を呼び出すことで、バブリングも中断させます。

この関数が既に呼び出されているかどうかを知るには、isImmediatePropagationStoppedを用います。

Example:

$("p").click(function(event){
 alert("event 1");
 event.stopImmediatePropagation();
});
$("p").click(function(event){
 alert("event 2");
});

[click]

event.isImmediatePropagationStopped()

既にstopImmediatePropagation()関数が呼ばれているかを返します。

Example:

$("p").click(function(event){
 alert(event.isImmediatePropagationStopped() + ', ' + event.isPropagationStopped());
 event.stopImmediatePropagation();
 alert(event.isImmediatePropagationStopped() + ', ' + event.isPropagationStopped());
});

[click]

• Home

API

• Core
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
• Internals

• 逆引きリファレンス