>後から追加される要素に対しても

よくわからないんだが
適切にHTML構造作ってバブリング考えてリスナ組み立てればいいだけでないの

>>601
jQueryだと

$('.class').on('click', function() { this はクリックされた要素 } );

これを

$(document).on('click', '.class', function() { this はクリックされた要素 } );

こう書き換えるだけでいい。
イベントハンドラの中身も書き換えなくて済む

これとまったく同じことをjQueryを使わずに書こうとしたら
ほんとうに大変だよ

class名でイベントリスナ貼り付けるの好きだよねjquery使い

>>603
IDでイベントハンドラを付ける意味が無いからね。

jQueryは動的ページと相性が良くて動的ページっていうのはある要素が条件によって
存在したりしなかったりするわけだけど、jQueryを使うといちいち要素が
存在しているかしていないかをチェックする必要がない

その動きはCSSと一緒。
CSSでも特定の要素が存在しなくてもエラーにならない

そして要素が1つであっても複数であっても、それを気にする必要がない。
まったく同じコードで処理できる。

同じことをDOM APIだけでやろうとするとループが必要になってしまう。
そのループを避けるため、ID指定で一つの要素だけ取得しようとするが
そもそもループが存在しないjQueryではID指定に拘る必要がない。

>これとまったく同じことをjQueryを使わずに書こうとしたら
>ほんとうに大変だよ
後から追加した要素のイベントを検出するのは、
JavaScriptで同じ事をやろうと思えば出来るんですか？
jQueryではどんな手法でやっているんですか？

そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか
やっぱり中に何があるかわからんけど、取り敢えず外から操る、それを楽にしたいでは無くて
コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう

グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ

>>606
まずイベントバブルを利用してdocumentにイベントハンドラを設定する
その後、発生したイベントの発生元が、指定したセレクタに一致するか比較する
そうすればできる。

最近のブラウザなら、指定したセレクタに一致するか比較するのは簡単に
できるようになっているらしいが、jQueryはそれができない時代から
独自で実装していた

>>607
> そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか

JavaScriptを使ったページで、要素が動的に増えたり減ったりするのは
よくあると思うけど？

>>607
> コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう

そうそれ！ jQueryが得意な所

IDを使ってしまうとコンポーネント化とは逆の方向になってしまう。
コンポーネントというのは使いまわしできるもので、
同じコンポーネントが一つのページに複数存在したりするものだからね。

それがjQueryと相性がいい。
同じコンポーネントというのは同じクラスであるということ
クラスに対してイベントハンドラを設定することで
コンポーネントに対しての処理が書きやすくなる。

> グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ

即時関数を使ってグローバル変数を無くすってのはよくあるけど、
jQueryを使うと即時関数を使わなくてもグローバル変数はなくなってしまう。
実際に書いてみればわかるがこんな感じになるから

$(".class").on('click', function() {
　// ここはローカル変数
});

結局、ここ数年のWeb界隈を見るに、既存のDOM構造の地位を脅かすようなモデルが現れてないからね
それらと相性がいいjQueryは、好みはともかく、現実的にはまだしばらくは覇権でしょう

jQueryは設計センスが良すぎてとても真似できない
これとlodashであと10年戦う

懐かしいな。もう一年前になるのか。
jQueryはオワコン、下降傾向にあるって言ってたやつ

一年経って減るどころか1.4%も増えたで？
その増えた量はReactよりも多い

どんな気分？ｗ

angularやreactとかは大規模複数人開発案件でないとメリットがデメリットを上回らないからjQueryはなくならないと思う。
jQueryにマウント取ってるreactファンボーイが頭おかしいだけ。
しかも攻撃理由がreact等のvirtualDOMとjQueryの生DOM操作は相性悪い→jQueryはオワコン　だからな。最高に頭悪い。
飛行機ができたから電車オワコンと言ってるようなもの。
原爆できたから軍隊にナイフ要らないと言ってるようなもの。

>>610
直近の親要素にaddEventListenerすれば済むことでは
classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる

>イベントバブルを利用してdocumentに

とりあえずグローバル変数、とりあえずsingletonみたいな感じで気持ち悪い

最低限にまとめろよ

jQueryの是非は置いておいても
angularもreactもJSXもダメすぎる、あんなものが覇権取れるわけない

>>615
直近の親要素にaddEventListenerするだけだと、クリックされた要素をうまく取得できない
下記のHTMLで動的に増えるものがliだとして、そのliの中に更にspanなどが入っている場合
[click here]の部分をクリックすると期待するliが取得できない

<ul id="ul">
　<li>list1 <span>[click here]</span></li>
　<li>list2 <span>[click here]</span></li>
　<li>list3 <span>[click here]</span></li>
</ul>

document.getElementById('ul').addEventListener('click', function(event) {
　console.log(this); // ul
　console.log(event.srcElement); // span
　console.log(event.target); // span
　console.log(event.currentTarget); // ul
})

jQueryだと大丈夫。実際にイベントハンドラを付けたulも
イベントハンドラで取得したいliも
実際にクリックされたspanも簡単に取得できる

$('#ul').on('click', 'li', function(event) {
　console.log(this); // li
　console.log(event.target); // span
　console.log(event.currentTarget); // li
　console.log(event.delegateTarget); // ul
})

>>615
> classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる

なんで？ 再利用させたいならばjQueryプラグインになるだろうけど
jQueryプラグインは特定のクラスに結びつくものじゃない

>>608
詳しい説明ありがとうございました。

>>618
>spanなどが入っている場合
HTML構造がそうなってるならspanだったらparentNode拾ってくればいいだけでは
classを使う必要性がない

spanじゃなくて、divの中にspanだったら
こんどはparentNodeのparentNodeを取ってくればいいだけ。
またその他の要素が入っていたら、頑張ってJavaScriptを
メンテナンスすればやれないことはない
気合と金と時間さえあれば歩いて九州から北海道だって行ける！

>>621
今はどれだけ簡単にできるかって話をしてるんだから
そこでparentNodeを取ってくればーと言った時点で、
簡単にはできないってことになるんだよ

やっぱりjQueryのdelegate相当のことをやろうとしたら
素のDOM APIでは大変そうですね

やっぱりjQuery良く出来てるわー
一年経って減るどころか増えてるからぐうの音もでないだろうね

html構造　javascriptも使うしCSSも使う
class名　一般的にはCSSが使う

html構造変わったらjavascriptコードも変わるのが当たり前
class変わってもjavascriptコードが変わることはあまりない
javascriptでclassをトグル切り替えするとかその程度

>>623
1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい？

逆に、デザイナがCSSいじるとき
javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい

そういう話をしているんだけど再利用ならjQueryプラグインが云々で何を言いたいのかさっぱり

> html構造変わったらjavascriptコードも変わるのが当たり前

そう、それがDOM APIの常識だった。
だけど、jQueryはそれを打ち破った。

なにせCSSと同じくセレクタを使って要素を絞り込むわけだから、
CSSと同じ効果が得られた

そして同じセレクタに同じデザインを適用するCSSと
同じセレクタに同じ振る舞いを持たせるjQueryという関係が出来上がった

考えてみれば、セレクタ＝コンポーネント、
同じコンポーネントが同じデザインとう振る舞いを持つのは当然ではないか

そして混沌としてHTMLとJavaScriptの世界に
汎用性がもたらされた

生DOMはいい加減自分を操作するために親を経由するとかそういうのやめてほしい
やるとしても適当に関数作って内部でやっとけばいいのに

>>627
> 1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい？

そうだよ。知らなかった？

複雑度っていうのは条件分岐一つで大きく膨れ上がる。
ifが1つ増えれば2倍、2つ組み合わさればなれば、2倍の2倍で4倍。
3つだと8倍。一つ増えるだけででテストしなければいけない場合は
指数関数的に増加する

if一つだから簡単だと思っているやつは
考えが浅いというわけさ

>>627
> javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい

デザイナがいじるのはデザインであってclass名じゃないからね

>>631
同じスタイルを適用したくても
javascriptがclass名で決め打ち処理入れてるから
CSSをコピペしたり別のclass名を作ったりしなきゃいけない、と嘆かないデザイナ？

>>632

違うものに同じデザインを適用したいってことないでしょｗ

Webデザイナと連携したことないけど何かいろいろ闇があるんですか？

切り分けたい時もあるし切り分けたくない時もある
切り分けられないを強要するライブラリということだ

あるわい！

違うものであってもデザインが同じなら
クラス名も同じにするんだい！

デザインが赤なら、クラス名もredにするだろ！

デザインが同じでも、本質的に別物なら
それは違うクラス名を与えるべきだよ

CSSに他classのスタイルを継承する文法があれば筋が通るんだけどね

デザインが同じなら同じクラス名にしたいっていうのは

このボタンの色は青でフォントサイズ2emですね。
こちらの見出しも青でフォントサイズも2emですね。

ならボタンと見出しでデザイン一緒ですから
同じクラス名にしましょうって考える人？

JavaScriptを使う人はHTMLとCSSのことも理解していなければ
だめだってわかる典型的な例だな

なぜかJavaScript使う人でHTMLやCSSが苦手な人が多い

>>616
なお実行順序の管理

違うものに同じスタイルを適用したいからって
クラス名を同じにするとか愚の骨頂
素人同然だわ

HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが
idはscriptから参照するためという目的が明示されてるが
併記されているclassにはそれがない
同じclassが同じ振る舞いであるべきかどうかは定かではないと言っておきたい

> HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが

思い込みな。何処かに書いているというのなら言ってみてくれ
ちなみに、idはスタイルのためのものかい？ｗ

>>644
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176
ここからリンクされている
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-class
これ

「role」としてid, class双方に「style sheet selector」が明示されているが
scriptはというとidのみ

どうせ適当な事を言うだけ言って逃げるだろうから
書いておくわ

http://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes

> 要素のクラスを空白区切りで並べたリストです。クラスは CSS の
> クラスセレクター や JavaScript の Document.getElementsByClassName() メソッドと
> いった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。

http://dev.w3.org/html5/spec-preview/global-attributes.html#classes

> Assigning classes to an element affects class matching in selectors in CSS,
> the getElementsByClassName() method in the DOM, and other such features.

CSSがなんたるかどう書くべきかを理解しているデザイナとしか仕事しないのならいいけどね

>>645

なんで今さらHTML4.01なんか持ち出してきたの？
わざと？

>>646
後者引用の文章は、classの割り当てはgetElementsByClassName()に影響すると言っているのみであって
classとは何であるかを説明しているものではないようだが

ほう、やっぱり意図的にHTML4.01を持ってきたようだ

http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#classes

Note: Assigning classes to an element affects class matching in selectors in CSS,
the getElementsByClassName() method in the DOM, and other such features.