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

投稿日:2016/03/03 / 更新日:2016/03/03

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() {} ) ;

デモ

RUN
HTML
CSS
JavaScript

<p>クリックすると3秒だけ文字色が赤くなるイベントを、設定したり削除したりするよ。最初は設定されてないよ。</p> <p><a>イベントを実行するボタン</a></p> <p><textarea></textarea></p> <ul> <li><a id="method1">取得</a></li> <li><a id="method2">設定</a></li> <li><a id="method3">削除</a></li> <li><a id="method4">リセット</a></li> </ul>

ul { margin: 24px 0 0 ; padding: 0 ; list-style-type: none ; } ul li { margin: 4px 0 0 ; padding: 0 ; } textarea { font-size: 16px ; width: 100% ; min-height: 60px ; box-sizing: border-box ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; }

// a要素を選択する var selection = d3.select( "a" ) ; // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // 設定されているクリックイベントを取得する var event = selection.on( "click" ) ; // テキストエリアに反映 d3.select( "textarea" ).property( "value", event ? event.toString() : "" ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // イベントの設定 selection.on( "click", function() { var _this = this ; this.style.color = "red" ; setTimeout( function() { _this.style.color = "#333" ; }, 3000 ) ; } ) ; } // クリックイベント3 document.getElementById( "method3" ).onclick = function() { // イベントの削除 selection.on( "click", null ) ; } // クリックイベント4 document.getElementById( "method4" ).onclick = function() { // a要素を元に戻す selection.on( "click", null ) ; }

構文

event || selection = selection.on( type [, listener || null [, capture ] ] )

引数
項目	説明
type	イベントハンドラを指定する。`click`、`mousemove`など、JavaScriptの`addEventListener`で指定できるものは全て指定可。d3.jsでは、同じハンドラのイベントは上書きされる。上書きされたくない場合は、ハンドラの後にドット(`.`)に続いたidを指定する。例えば、ハンドラを`click.typeA`、`click.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を指定するには、ハンドラの後にドット(.)を付けて、それに続ける。