teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

5

追記

2020/09/25 12:56

投稿

Zuishin
Zuishin

スコア28675

answer CHANGED
@@ -76,4 +76,10 @@
76
76
  HTMLElement.prototype.observe = function (type) {
77
77
  return new Promise(resolve => this.addEventListener(type, resolve, {once: true}));
78
78
  };
79
- ```
79
+ ```
80
+
81
+ ### 追記
82
+
83
+ 取り消しに対応した observe メソッドです。
84
+
85
+ [Add 'observe(type)' method which monitor events to HTMLElement in JavaScript](https://gist.github.com/Zuishin/6c5ae7fc66fa31db175bb034878e096d)

4

修正

2020/09/25 12:56

投稿

Zuishin
Zuishin

スコア28675

answer CHANGED
@@ -76,8 +76,4 @@
76
76
  HTMLElement.prototype.observe = function (type) {
77
77
  return new Promise(resolve => this.addEventListener(type, resolve, {once: true}));
78
78
  };
79
- ```
79
+ ```
80
-
81
- ### 追記
82
-
83
- よく考えると、Promise の reject メソッドを呼べばいいだけなので、シンプルなもので十分でした。

3

追記

2020/09/24 01:48

投稿

Zuishin
Zuishin

スコア28675

answer CHANGED
@@ -76,4 +76,8 @@
76
76
  HTMLElement.prototype.observe = function (type) {
77
77
  return new Promise(resolve => this.addEventListener(type, resolve, {once: true}));
78
78
  };
79
- ```
79
+ ```
80
+
81
+ ### 追記
82
+
83
+ よく考えると、Promise の reject メソッドを呼べばいいだけなので、シンプルなもので十分でした。

2

修正

2020/09/24 01:36

投稿

Zuishin
Zuishin

スコア28675

answer CHANGED
@@ -65,4 +65,15 @@
65
65
  </script>
66
66
  </body>
67
67
  </html>
68
+ ```
69
+
70
+ ### 追記
71
+
72
+ [EventTarget.addEventListener()](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener) は option に once を渡すことで実行後自動的に削除できますが、将来、実行されなかったものを削除できる仕組みに拡張したいため、あえて removeEventListener() を入れています。
73
+ 入れないなら次のようにシンプルになります。
74
+
75
+ ```JavaScript
76
+ HTMLElement.prototype.observe = function (type) {
77
+ return new Promise(resolve => this.addEventListener(type, resolve, {once: true}));
78
+ };
68
79
  ```

1

修正

2020/09/23 23:40

投稿

Zuishin
Zuishin

スコア28675

answer CHANGED
@@ -27,14 +27,14 @@
27
27
  <script>
28
28
  // イベントを非同期で取得する
29
29
  HTMLElement.prototype.observe = function (type) {
30
- const handler = resolve => {
30
+ const getHandler = resolve => {
31
31
  const result = () => {
32
32
  resolve();
33
33
  this.removeEventListener(type, result);
34
34
  };
35
35
  return result;
36
36
  };
37
- return new Promise(resolve => this.addEventListener(type, handler(resolve)));
37
+ return new Promise(resolve => this.addEventListener(type, getHandler(resolve)));
38
38
  };
39
39
 
40
40
  (async () => {