jQueryイベントオブジェクト

jQuery イベント オブジェクトの使用

イベントを使用するには、当然イベント オブジェクトが必要です。イベントオブジェクトの取得やイベントオブジェクトのプロパティがブラウザごとに異なるため、ブラウザを越えてイベントオブジェクトを利用することが困難です。

イベント オブジェクトは jQuery で統一されています。イベント処理関数をバインドするとき、jQuery 形式のイベント オブジェクトが唯一のパラメーターとして渡されます:

$("#testDiv").bind("click", function(event) { });

イベント オブジェクトの詳細な説明については、jQuery の公式ドキュメントを参照してください。 : http://docs.jquery.com/Events/jQuery.Event

jQuery イベント オブジェクトは、異なるブラウザー間の差異をマージします。たとえば、すべてのブラウザーで、event.target プロパティを通じてイベントのトリガーを取得できます。 IE ネイティブ イベント オブジェクトを使用するには、event.srcElement) にアクセスする必要があります。

jQuery イベント オブジェクトがブラウザでサポートできるプロパティは次のとおりです:

EventObjType.jpg

上記は jQuery 公式ドキュメントで提供されているイベント オブジェクトのプロパティであり、複数のブラウザでサポートされているプロパティも同様です以下に提供されます:

EventObjTypeMore.jpg


属性を持つことに加えて、イベント オブジェクトにはイベントもあります。バブリング stopPropagation() のキャンセルなど、必ず使用されるイベントがいくつかあります。以下は jQuery イベント オブジェクトの関数のリストです:

EventObjFun.jpg


これらの関数の中で、stopPropagation() は最もよく使用される関数であり、必ず使用する関数です。 バブリングをキャンセルするには、元のイベント オブジェクトでevent.cancelBubble=trueを操作するのと同じです。


学び続ける
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function() { $("a").click(function(event) { alert(event.type); //获取事件类型(此处弹出 click) alert(event.target.href); //获取触发事件的元素的 href 属性值 alert("当前鼠标坐标:" + event.pageX + ", " + event.pageY); //获取鼠标当前坐标 event.preventDefault(); //阻止链接跳转 }); }); </script> </head> <!-- HTML --> <body> <a href="http://www.google.com/">Google</a> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜