指定したイベント発火時、指定した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')); // false
new 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