selection.on - イベントを設定する

投稿日: / 更新日:

d3.jsのselection.on()は、要素に設定されたイベントを確認したり、要素にイベントを設定するためのメソッドです。イベントオブジェクトには、d3.eventでアクセスできます。

サンプルコード

<a>イベントのボタン</a>
// a要素を選択する
var selection = d3.select( "a" ) ;

// 設定されているクリックイベントを取得する
var event = selection.on( "click" ) ;

//クリックイベントを設定する
selection.on( "click", function() {
	// イベントの処理

	// イベントオブジェクトには[d3.event]でアクセス
	d3.event.preventDefault() ;
} ) ;

// クリックイベントを削除する
selection.on( "click", null ) ;

// 2つのクリックイベントを設定する (ドットの後に一意のIDを付けて分ける)
selection.on( "click.typeA", function() {} ) ;
selection.on( "click.tyoeB", function() {} ) ;

デモ

構文

event || selection = selection.on( type [, listener || null [, capture ] ] )
引数
項目説明
typeイベントハンドラを指定する。clickmousemoveなど、JavaScriptのaddEventListenerで指定できるものは全て指定可。d3.jsでは、同じハンドラのイベントは上書きされる。上書きされたくない場合は、ハンドラの後にドット(.)に続いたidを指定する。例えば、ハンドラをclick.typeAclick.typeBというように分ければ、1つの要素に複数の同ハンドライベントを設定できる。
listener省略可。第2引数に設定したいイベントの関数を指定する。
null第2引数にnullを指定した場合、既に設定されているイベントが削除される。第2引数以降を省略した場合、要素に設定されているイベントを取得する。
capture省略可。trueにすると、キャプチャフェーズでイベントが実行される。省略した場合、イベントはバブリングフェーズで実行される。イベントが発火すると、まずはルート要素からイベントを発火させた子要素に向かって、キャプチャフェーズのイベントが順番に実行される。そして、今度は逆に、イベントを発火させた子要素からルート要素に向かって、バブリングフェーズのイベントが順番に実行される。設定したイベントがキャプチャーフェーズか、バブリングフェーズかで実行される順番が違うわけだ。
戻り値
項目説明
event第2引数以降を省略した場合、現在設定されているイベントが戻り値となる。
selection第2引数以降を指定した場合、d3.selectionオブジェクトが戻り値となる。

ノート

削除はnull
イベントを削除したい時は、第2引数にnullを指定する。
上書きされる
1つの要素に同じハンドラのイベントを設定した場合、前のイベントは上書きされてなくなってしまう。
eventはd3.event
イベントオブジェクトは、d3.js独自の仕様で、d3.eventでアクセスできる。利用方法は、通常のイベントオブジェクトと変わらない。function(e){ e.preventDefault() }ではアクセスできないので注意。
IDを付ける
同じハンドラのイベントを複数、設定したい場合は、ハンドラに一意のIDを指定する。IDを指定するには、ハンドラの後にドット(.)を付けて、それに続ける。