f@ctor

今さら聞けないHTML　

今さら聞けないHTML　
目次

JavaScriptのバブリングとキャプチャリング

JavaScriptのイベントバブリングとキャプチャリングについて知る機会があったので簡単にまとめます。

### バブリングとは
ご存知の方も多いと思いますが、子要素で発火したイベントが親要素にまで伝播することをバブリングと言います。よく考えてみれば普段から目にする光景で、
“`html

テキスト
テキスト2

“`
このようにid=’button’のdiv要素にクリックイベント時の処理を追加した時、内部のテキスト部分（子要素のdiv）をクリックしても処理が実行されます。これは子要素から親へとイベントが伝播しているためです（ボタン内部の要素もボタンの一部なので、感覚的にこの挙動に違和感がなく、バブリングについて意識することがありませんね）
また、子 → 親 → その親 → その親 … とどんどん上へバブリングしていくイベントですが、イベントリスナーに渡すコールバック関数のイベント引数の**currentTarget**でアクセスできます。逆に、イベントが生じた出発源とな

元記事を表示

Safariだとoptionタグに「display: none;」は効かない？！

## 結論
Safariのバグらしい。
バグ報告レポートによると、2006年4月12日に報告されている模様。
https://bugs.webkit.org/show_bug.cgi?id=8351

## 動作確認
– サンプルコード
“`html:hoge.html





Document



“`

名前を入力してエンターキーを押したら送信されると思いますが、
フォームをエンターキーで送信をかける場合、**formタグの子要素にある「最初」の`type=”submit”`のボタンを実行**してしまう。

「戻る」ボタンはtype属性が記述されていないのでスルーされるかと思いきや、`button`タグの`type`属性は初期値が`type=”submit”`らしい。
[HTML5タグリファレンス](https:

元記事を表示

DjangoでNone判定をして、HTMLの表示を切り替える方法（JavaScript活用）

## 問題の発生
Djangoのテンプレートで値がNoneだった場合、その情報をもとにHTMLの表示を切り替えたいことがある。例えば、データがあった場合は、試合結果を表示するようにし、データがない場合は、「データがありませんでした」と表示するようにしたい。
今回は以下のようにしたい
・match_countの値がnoneだった場合、match_count_sentenceのdisplayをnoneとする。
・match_countの値がnoneだった場合、match_result_sentence_noneのdisplayをblockとする。
“`HTML

{{ match_count }}戦でした。

試合がありませんでした

“`

## 解決策
pタグ自体にmatch_countの値を埋め込み、その値で判断する。

## 手順

1.pタグに値を埋め込む
“`HTML

元記事を表示

全てのチェックボックスをチェック、または解除するjs

“`html





チェックボックス一括切り替えサンプル


チェックボックス一括切り替えサンプル