イベント

JavaScript

jQuery 「イベント」一度だけ呼び出したいイベントハンドラを割り当てる

.on()で追加されるイベントハンドラはイベントが発生すれば何度でも実行されますが、.one()メソッドでは一度だけ実行して以後は実行されないイベントハンドラを登録できます。書式$(対象要素).one('イベントタイプ',,,)$("table").one("click dblclick","td",{msg: 'message'}, function(e){ ・ ・});サンプル1度だけ発火する...
JavaScript

jQuery 「イベント」イベントを発火する

.trigger()は、イベントを発火して.on()メソッドで割り当てられたイベントハンドラを実行します。.triggerHandler()も同様にイベントを発火してイベントハンドラを実行しますが、trigger()がそのイベントによってブラウザの既定の動作が発生するのに対して、triggerHander()ではイベントハンドラが実行されるだけでブラウザの既定の動作は起きないという点が異なります。...
JavaScript

jQuery 「イベント」イベントハンドラを解除する

イベントとイベントハンドラの割り当てを解除します。引数を指定しなければ、全イベントに対するすべてのイベントハンドラを解除します。イベントタイプだけ指定した場合は、そのイベントに対するすべてのイベントハンドラを解除します。書式$(対象要素).off(イベントタイプ, ,)$(対象要素).off(イベントタイプ, )$(対象要素).off(イベントタイプ)$(対象要素).off()$('table')...
JavaScript

jQuery 「イベント」イベントにイベントハンドラを割り当てる

イベントに対し、イベントハンドラを割り当てます。従来の.live()、.delegate()、.bind()の機能は.on()に統合されましたので、廃止はたは非推奨になっています。これから開発するスクリプトでは.on()を使います。最初の書式では、1つまたは複数のイベントに対して、1つのイベントハンドラを割り当てます。複数のイベントを指定する場合は$('table').on('click dbcl...
JavaScript

jQuery 「イベント」スクロールを検出する

このイベントは、ブラウザ上のスクロールで発生します。window要素だけでなく、フレームやCSSでoverflow:scrollもしくはoverflow:autoが設定された要素も対象になります。書式$(対象要素).on('scroll', イベントハンドラ)$(対象要素).trigger('scroll')$(対象要素).scroll()$('form').scroll(function(e){...
JavaScript

jQuery 「イベント」ブラウザウィンドウのリサイズを検出する

ブラウザウィンドウのサイズを変更すると発生するイベントで、対象はWindow要素だけです。このメソッドは、ブラウザによって動作が異なる場合があります。InternetExplorerやSafari、Google Chrome等では、リサイジョンによって完全にリサイズが完了したときに1度だけイベントが発生する場合があります。trigger('resize')、引数無しのresize()では、リサイズ...
JavaScript

jQuery 「イベント」フォーム送信のイベント

フォームの送信時に発生します。引数なしのsubmit()メソッドとtrigger('submit')は、フォームの送信をスクリプトから実行します。書式$(対象要素).on('submit', イベントハンドラ)$(対象要素).trigger('submit')$(対象要素).submit()$('form').submit(function(e){ alert('submit');});$('fo...
JavaScript

jQuery 「イベント」テキストの選択

input type="text"とtextareaに限定のイベントです。このイベントは、要素中のテキストが選択されたとき、または選択範囲を変更したときに発生します。返されるイベントオブジェクト(e)からは、e.target.selectionStart:選択範囲の開始位置e.target.selectionEnd:選択範囲の終了位置e.target.selectionDirection:選択の方...
JavaScript

jQuery 「イベント」フォーム要素の変更時イベント

input、textarea、selectの各要素に対し、値の変更が起きたときに発生するイベントです。厳密には、イベント発生のタイミングは要素の種類によって異なります。select要素だけ、マウスで選択を行ったと同時にイベントが発生しますが、他の要素ではフォーカスを失った時点でイベントが発生します。引数無しの.change()メソッドは、スクリプトからchange()イベントを強制的に発生させます...
JavaScript

jQuery 「イベント」キーを押す・離す

keydown()とkeypress()は、共にキーの押下で発生するイベントです。両者が異なる点は、keydown()がe.whichの情報として「キーコード」を取得するのに対し、keypress()が入力された文字の「文字コード」を取得することです。たとえば、Aキーを押した場合、keydown()はキーコード「65」を返しますが、keypress()は文字コード「97」を返します。大文字の'A'...
JavaScript

jQuery 「イベント」フォーカスの移動

.focus()及び、.focusin()イベントハンドラは、要素にフォーカスが移ったときにコールされます。同様に、.blur()及び.focusout()イベントハンドラは、要素からフォーカスが外れたときにコールされます。これらのイベントは、キー操作でもマウス操作でも発生します。.focus()と.focusin()の違い、.blur()と.focusout()の違いは、イベントバブリングに関連...
JavaScript

jQuery 「イベント」マウスカーソルの出入りに応じ、それぞれの処理を実行する

.hover()メソッドは、.mouseenter()と.mouseleave()を1つの書式にまとめたものです。.on()メソッドで「.on('hover'…)」と記述することはできませんので、hoverをonで書きたい時はmouseenterとmouseleaveを使います。書式$(対象要素).hover(function(e){入る処理},function(e){出る処理})$(対象要素)....
JavaScript

jQuery 「イベント」マウスカーソルの要素への出入り

mouseover()とmouseenter()イベントは、要素にマウスカーソルが入った時に発生します。同様に、マウスカーソルが要素から出たとき、mouseout()、mouseleave()イベントが発生します。mouseout()とmouseleave()、mouseout()とmouseleave()の違いは、ともに要素の関係とイベントバブリングに関するものです。それぞれの前者は要素同士の親...
JavaScript

jQuery 「イベント」マウスボタンを押す・離す

mousedown()は、マウスボタンを押すとイベントが発生します。押されたボタンに応じて、左なら1、中央は2、右は3が、e.whichプロパティに返されます。反対に、mouseup()を使うと、ドラッグ&ドロップやコンテクストメニューのような、高度な処理も記述できます。対象となるHTML要素には制限はなく、どの要素にも、イベントハンドラを結び付けられます。引数無しの.mousedown()、.m...
JavaScript

jQuery 「イベント」マウスの移動

mousemove()は、マウスカーソルの移動をトリガーとしてイベントが起動します。対象となるHTML要素には制限はなく、どの要素にでもmousemove()イベントハンドラを結び付けられます。引数無しの.mousemove()メソッドは、「trigger('mousemove')」の短縮形です。こちらは、ユーザーの操作にかかわらず、強制的にmousemoveイベントを発生させます。ただし、実際に...
JavaScript

jQuery 「イベント」ダブルクリック

「on('dbclick', インベストハンドラ)」は、マウスのダブルクリックをトリガーとしてイベントが起動します。対象となるHTML要素には制限はなく、どの要素でもdblclickイベントハンドラを結び付けられます。引数無しの.dblclick()メソッドは、「trigger('dblclick')」の短縮形です。こちらは、ユーザーの操作にかかわらず、強制的にダブルクリックイベントを発生させます...
JavaScript

jQuery 「イベント」マウスクリック

jQuery1.7で.on()メソッドが追加され、イベントとイベントハンドラを結び付ける処理はこの「.on()」を使うことが推奨されるようになりました。.on()の第1引数に「click」を指定することで、マウスのクリックをトリガーとしてイベントが起動します。クリックイベントは、厳密に言うと「マウスカーソルが対象要素の上にあり、ボタンが押され、離されたとき」に発生します。対象となるHTML要素には...
JavaScript

jQuery 「イベント」イベントオブジェクトのメソッド群

イベントハンドラ内でe.preventDefault()メソッドがコールされた場合、イベントのデフォルトの動作はキャンセルされます。例えば、<a href=…>によるアンカータグをクリックしたとき、通常ならば指定されたURLにブラウザの画面は遷移します。e.preventDefault()は、この画面の遷移をキャンセルし、イベントハンドラの処理だけを実行したいときに便利です。isDefaultPr...