イベントを遅らせて発火させ、イベントオブジェクトから target 要素を取得したい

前提・実現したいこと

一定時間後イベントを遅らせて発火させるためのプログラムを書いてみました。
しかし、最終的に発火させるハンドラーに渡されるイベントオブジェクトから
event.target 要素が取得できません。是非そこから取得する方法を知りたいのです。

ソースコード

javascript
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<title>イベントを遅らせたい</title>
4
5<body>
6<input type="text" name="inp"><br />
7<input type="text" name="inp"><br />
8
9
10<script>
11
12class EventDelay {
13
14  constructor (type, target, delayTime) {
15    this.type = type;
16    this.target = target;
17    this.delayTime = delayTime;
18    this.timerId = null;
19    this.event = null;
20  }
21
22
23  dispatch () {
24    this.timerOff ();
25    this.target.dispatchEvent (this.event);
26  }
27
28
29  timerOff () {
30    if (this.timerId)
31      clearTimeout (this.timerId);
32    this.timerId = null;
33  }
34
35
36  handleEvent (event) {
37    this.timerOff ();
38
39    if (event.isTrusted) {
40      this.event = event;
41      event.stopImmediatePropagation ();
42      this.timerId = setTimeout (this.dispatch.bind (this), this.delayTime);
43    }
44  }
45
46
47  static create (type, target = document, delayTime = 333, bf = false) {
48    const obj = new this (type, target, delayTime);
49    target.addEventListener (type, obj, bf);
50    target = null;
51    return obj;
52  }
53
54}
55
56//-----------------------------------------------
57
58//document に対する inputイベントを 333m/s 遅らせる
59EventDelay.create ('input');
60
61//-----------------------------------------------
62
63document.addEventListener ('input', event=> {
64  //変数 event には、イベントオブジェクトのようでそうではない。
65  let e = event.target;
66  console.log (e.value);// value値を取得したい。
67}, false);
68
69
70
71</script>

行動規範の内容に同意します

回答2件

弄繰り回していたら解決しました。

.dispatch() するときに、対象となる要素に dispatchEvent() することで目的が達成されました。
お騒がせしました。

× this.target.dispatchEvent (this.event)
〇 this.event.target.dispatchEvent (this.event)

javascript
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<title>イベントを遅らせられた</title>
4
5<body>
6<input type="text" name="inp"><br />
7<input type="text" name="inp"><br />
8
9
10<script>
11
12/*****************************
13  連続するイベントをキャンセルし、一定時間が経過したらイベントを発生させる
14
15  const obj = EventDelay.create (eventType [, target[, delayTime[, useCapture]]]);
16
17******************************/
18
19
20class EventDelay {
21
22  constructor (type, target, delayTime) {
23    this.type      = type;
24    this.target    = target;
25    this.delayTime = delayTime;
26
27    this.timerId   = null;
28    this.event     = null;
29    this.disabled  = false;
30  }
31
32
33  dispatch () {
34    this.timerOff ();
35//× this.target.dispatchEvent (this.event);
36    
37    if (! this.disabled)
38      this.event.target.dispatchEvent (this.event);//イベントのターゲットが肝だった
39  }
40
41
42  timerOff () {
43    if (this.timerId)
44      clearTimeout (this.timerId);
45
46    this.timerId = null;
47  }
48
49
50  timerOn () {
51    if (this.disabled) return;
52
53    let cbFunc = this.dispatch.bind (this);
54    this.timerId = setTimeout (cbFunc, this.delayTime);
55  }
56
57
58  handleEvent (event) {
59    this.timerOff ();
60
61    if (this.disabled) return;
62
63    if (event.isTrusted) {
64      this.event = event;
65      event.stopImmediatePropagation ();
66      this.timerOn ();
67    }
68  }
69
70
71  static create (type, target = document, delayTime = 333, useCapture = false) {
72    if (1 > arguments.length || ! type)
73      throw new Error ('イベントタイプが不正です');
74    
75    let obj = new this (type, target, delayTime);
76    target.addEventListener (type, obj, useCapture);
77    target = null;
78
79    return obj;
80  }
81
82}
83
84//-----------------------------------------------
85
86//document に対する inputイベントを 333m/s 遅らせる
87EventDelay.create ('input');
88
89//-----------------------------------------------
90
91document.addEventListener ('input', event=> {
92  let e = event.target;
93  console.log (event, e.value);// value値を取得
94}, false);
95
96</script>

投稿2021/11/20 11:37

編集2021/11/20 11:39

babu_babu_baboo

総合スコア616

ベストアンサー

ブラウザがすべてのイベントリスナを呼び終わったあと、使い終わったEventオブジェクトの target プロパティに null をセットすることがあります。
なので、EventDelay.handleEvent() 内で event.target が non-null でも、その後に null になることがあります。

dispatch() 内で dispatchEvent(this.event) の前に this.event.target を設定すれば期待どおりになるかもしれません。

投稿2021/11/19 14:48