🦋 🕔 🆑 プロトタイプ：セレクターとイベント 👨‍👨‍👧 🤷🏾 🧠

プロトタイプは間違いなく最も強力なJavascriptライブラリの1つですが、セレクターをイベントにバインドするためのネイティブサポートの欠如という大きな欠点と誤解されることがある1つの小さな欠点があります。比較のために、< ahref=選択した jquery.com »title-selectedJQuery >> jQueryは主要な機能の1つであり、<ahref=getjquery.com»title-sejQuery>> jQueryがなければそれを想像するのは困難です。知らない人のために-これは、CSSセレクター、 onclick 、 onmouseover 、 onmouseout 、 onblur 、 onfocusなどのほとんどのイベントを通じて、JavascriptをXHTMLから分離する機能です。

この問題の最初の解決策の1つは、 Ben Nolanによって発行されました。彼はこの問題を解決し、現在非常に適している小さなプラグインの動作を書いた。そのマイナスは、ルールのコードの大きなフットワークと、この大きなスクリプトサイズでこれらのルールを再利用する柔軟性がないことです。 <a href= primedjquery.com»title-selected_Query> > jQueryを使用してコードを簡単に記述できるため、一部の人々はPrototypeで同じスタイルを実装するときだと考えました。そしてジャスティン・パーマーは、いくつかの考えの後で、マイナスの振る舞いがイベントを書いたことを考慮に入れて：Selectors すでに< ahref=ターゲット jquery.com »title-sejQuery >> jQueryに近いものに加えて、 疑似イベントセレクターを使用して、複数の異なるセレクターを異なるイベントでグループ化する機能がありました。 <a href= rankjquery.com»title-selectedJQuery> > jQueryでは、そのような可能性はありませんが、原則的には特に需要があるわけではありません。残念ながら、このプラグインは開発されず、バージョン1.0のままであり、いくつかのバグがありました。おそらく、 Dan Webbという名前の男から次のUJSプラグインが登場したため、その開発は停止しました。そのソリューションはLow Proと呼ばれ、 Prototype Event APIを拡張する強力なツールです。また、<a href= preferredjquery.com»title-choicejQuery>> jQueryのプラグインバージョンがあることに注意してください。

こちらから Low Proをダウンロード

それでは、実際の動作を見てみましょう。

まず、ライブラリをXHTMLに含めます。XHTMLはすべてが機能するために有効でなければならないことを忘れないでください。そうしないと、Javascriptが予期しない動作をする可能性があります。

main.jsにルールを追加します。

例1：

  Event.addBehavior（{
	 'div.myclass a：click'：function（e）{ 
		アラート（「例1」）;
		 falseを返します。
	 }
 }）;

そして、ここに、「a」のすべての要素のクラス「myclass」を持つすべての「div」でonclickイベントをキャプチャする最初のルールがあります。要素「a」の通常の動作が機能しないように、 falseを返す必要があります。

例2：

  Event.addBehavior（{
	 'div.myclass a：click'：function（e）{ 
		アラート（「例1」）;
		 falseを返します。
	 }、
	 'div [id * = cde]：クリック、div [id $ = cd]：マウスオーバー、div [id ^ = abcdef]：マウスアウト'：function（e）{ 
		アラート（「例2」）;
	 }
 }）;

この例では、CSSの第3レベルの属性セレクターと、さまざまなイベントを持つルールのグループを使用します。

ご覧のとおり、すべてが非常に簡単です。これ以上の例を書く価値はないと思います。ここからダウンロードすることをお勧めします

プロトタイプ：セレクターとイベント

More articles: