指定したイベント発火時、指定したkey/value形式の値にdataを書き換えます。
- dataは登録された全イベントハンドラ間で共有されます
- 一つのイベントタイプに複数のデータを登録できます
下記引数を指定する事で「FiredEvent のインスタンス」を返します。
| 序数 | 引数名 | 説明 |
|---|---|---|
| 第1引数 | currentTarget |
addEventListener で登録する要素ノードを指定します |
| 第2引数 | eventMap |
「addEventListener の第一引数で指定するイベントタイプ(type)」「イベント発火時のデータ(key/value)を new Map 形式で指定します |
| 第3引数 | dataDescriptor |
data プロパティ参照値のdescriptorを {writable: false} 形式で指定します(既定値 = {writable: false}) |
dataDescriptor の設定値は以下の通りです。
| 名前 | 値 | 説明 |
|---|---|---|
writable |
Boolean値 | true = 内部データの実体を返し、Map#set で書き換えが出来ます。/ false = 内部データの複製値を返し、Map#set で書き換えを行っても内部データに影響がありません |
例えば、
focusイベント発火時 ->data.active = trueを実行blurイベント発火時 ->data.active = falseを実行
を指定する場合、次のコードを書きます。
const fe = new FiredEvent(document.getElementById('sample'), new Map([
['focus', [['active', true]]],
['blur', [['active', false]]]
]));第三引数が指定されなかった為、descriptorは {writable: false} として扱われます。詳細は「FiredEvent#data」を参照してください。
FiredEvent で保存されたデータを new Map 形式で返します。
<input type="text">
<script>
'use strict';
const currentTarget = document.querySelector('input[type=text]');
const fe = new FiredEvent(currentTarget, new Map([
['focus', [['active', true]]],
['blur', [['active', false]]]
]));
console.log(Array.from(fe.data)); // [["active", undefined]]
console.log(fe.data.get('active')); // undefined
</script>上記の通り、イベントが発火していない状態では初期値の undefined が返却されます。
fucus, blur イベントが発火すると、active 値が指定値に書き換わります。
currentTarget.dispatchEvent(new FocusEvent('focus', {bubbles: true}));
console.log(fe.data.get('active')); // true
currentTarget.dispatchEvent(new FocusEvent('blur', {bubbles: true}));
console.log(fe.data.get('active')); // falsenew FiredEvent() の第三引数では、dataプロパティ参照値のdescriptorを指定でき、{writable: false} を指定すると、返り値が複製値となり、実質的に読み取り専用となります。
const currentTarget = document.querySelector('input[type=text]');
const fe = new FiredEvent(currentTarget, new Map([
['focus', [['active', true]]],
['blur', [['active', false]]]
]), {writable: false});
console.log(Array.from(fe.data)); // [["active", undefined]]
console.log(fe.data.get('active')); // undefined
console.log(fe.data === fe.data); // false複製値ですので、Map#set で値を書き換えても、元データに影響がありません。
console.log(fe.data.get('active')); // undefined
fe.data.set('active', 'foo');
console.log(fe.data.get('active')); // undefined第三引数に {writable: true} を指定する事で、元データに影響を与えることが出来ます。
const fe = new FiredEvent(currentTarget, new Map([
['focus', [['active', true]]],
['blur', [['active', false]]]
]), {writable: true});
console.log(fe.data.get('active')); // undefined
fe.data.set('active', 'foo');
console.log(fe.data.get('active')); // "foo"new FiredEvent の第一引数で指定された要素ノードを返します。
const currentTarget = document.getElementById('sample');
const fe = new FiredEvent(currentTarget, new Map([
['focus', [['active', true]]],
['blur', [['active', false]]]
]));
console.log(fe.currentTarget === currentTarget); // true