回答編集履歴
2
inline event handler
test
CHANGED
|
@@ -29,5 +29,17 @@
|
|
|
29
29
|
|
|
30
30
|
---
|
|
31
31
|
|
|
32
|
-
###
|
|
33
|
-
複数要素対応
|
|
32
|
+
### おまけ
|
|
33
|
+
##### 複数要素対応
|
|
34
|
+
htmlタグの中にカスタムデータ属性をかいて、それを利用するといいと思います。
|
|
35
|
+
- 複数要素対応版サンプル：https://jsfiddle.net/t3Lz8juw/2/
|
|
36
|
+
|
|
37
|
+
##### イベントの扱いについて
|
|
38
|
+
質問者様のように`<input type="color" onChange="setBGcolor2(this.value);">`と、htmlの中に書く方法はインラインイベントハンドラーと呼ばれています。
|
|
39
|
+
現在は非推奨です。
|
|
40
|
+
|
|
41
|
+
> Web 上で見かける最初期のイベントハンドラー登録方法には、上の例のようなイベントハンドラー HTML 属性(インラインイベントハンドラーとも言う)があります （中略）多くのイベントハンドラープロパティと等価な HTML 属性を見付けるでしょうが、使うべきではありません — こういうのは悪い方法とみなされています。ちょっとした事を手早く片づけたい時、イベントハンドラー属性を使うのが簡単に思えるかもしれませんが、あっという間に手がつけられない、効率の悪いものになってしまいます。
|
|
42
|
+
（引用元：[イベントへの入門 - ウェブ開発を学ぶ | MDN#インラインイベントハンドラー — 使っちゃだめ ](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9%E3%83%BC_%E2%80%94_%E4%BD%BF%E3%81%A3%E3%81%A1%E3%82%83%E3%81%A0%E3%82%81)）
|
|
43
|
+
|
|
44
|
+
代わりに`.addEventListener()`が推奨されています。
|
|
45
|
+
|
1
おまけ
test
CHANGED
|
@@ -26,3 +26,8 @@
|
|
|
26
26
|
msgArea.style.background = `linear-gradient(${color1}, ${color2})`;
|
|
27
27
|
}
|
|
28
28
|
```
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
##### おまけ
|
|
33
|
+
複数要素対応版サンプル：https://jsfiddle.net/t3Lz8juw/2/
|