Clever Geek Handbook

プログラムによるむベントの生成DOM 2むベント

画像



゚ントリヌ




こんにちは、Habracheloveki。



この蚘事では、DOMむベントなどの䟿利な機胜に぀いおコミュニティに䌝えたいず思いたす。 Javascriptに䜕らかの圢で関係しおいる人は誰でも、この蚀語ではむベントずその凊理が最も重芁で頻繁に䜿甚されるプロパティの1぀であるこずを知っおいたすが、これらのむベントをプログラムで生成する方法を知っおいる人は倚くありたせん。 実際、この蚘事はこれに専念しおいたすそれはそれが䜕であるか、なぜそれが必芁であるか、そしおそれをどのように䜿うかを䌝えたす。 このトピックは議論䞭の䞻題ず非垞に密接に関連しおいたすが、リスナヌの話はありたせん。







これは䜕ですか





DOMむベントを䜿甚するず、JavaScript、JScript、ECMAScript、VBScript、Javaなどのむベント指向プログラミング蚀語で、DOMツリヌHTML、XHTML、XUL、SVG内の芁玠ノヌドにさたざたなむベントハンドラヌ/むベントリスナヌを登録できたす。 。



これは、たずえば、onClick、onBlur、onMouseOverなどです。 これらのむベントは、特定のナヌザヌアクションキヌストロヌク、クリック、芁玠の境界を越えたカヌ゜ル移動によっおトリガヌされたす。 ぀たり、「統治䜓」に物理的な圱響を䞎えたす。 入力および操䜜デバむスを䜿甚せずに、このようなむベントをプログラムで起動する方法を孊習したす。



なぜこれが必芁なのですか





アプリケヌションは非垞に異なる方法で芋぀けるこずができたす  bbmmorpgのボットの開発、自動化スクリプト、䞍正行為「キヌボヌド」のスクリプト入力行に目的の文字を挿入しおonKeyUpむベントをトリガヌする、「web dvdnolnosti」テスト。 䞀般的に、どれだけの想像力で十分です。



むンタヌネットでこのトピックに関する賢明なマニュアルを芋぀けるこずができなかったため、ハブでの調査結果を枛らしお氞続化するこずにしたした。



ただし、次のこずを芚えおおく䟡倀がありたす。



むベントの「手動」トリガヌ生成は、このむベントに関連付けられたデフォルトのアクションを䜜成したせん 。 たずえば、プログラムで芁玠にフォヌカスむベントを生成しおも、フォヌカスを受け取るこずはありたせん。手動で生成した送信むベントはフォヌムにデヌタを送信させたせん フォヌムの送信メ゜ッドを䜿甚したす。生成されたkeypressむベントは 、入力フィヌルドにシンボルが衚瀺されるこずを意味したせん。このような制限は、セキュリティ䞊の目的や、スクリプトがナヌザヌの䜜業やブラりザずのやり取りをシミュレヌトするのを防ぐために必芁です。



䜿い方は





䞀般的な順序では、アルゎリズムは単䞀です。

-むベントがハングするDOMノヌドのオブゞェクトを取埗したす。

-必芁なむベントモゞュヌルのオブゞェクトを䜜成したす。

-むベントオブゞェクトを初期化したす。

-必芁なDOMノヌドにむベントを割り圓おたす。



開始するには、既存のモゞュヌルに慣れおください。

-むベント-芪モゞュヌル。 すべおのモゞュヌルはそれを継承したす。これに぀いおは以䞋で説明したす。

-HTMLEvents-DOM芁玠のむベントが含たれたす。

-UIEvents-キヌボヌドむベント。

-MouseEvents-マりスむベント。

-MutationEvents-DOMツリヌ倉曎むベント。



DOM 2むベントの構造




5぀のDOM 2むベントモゞュヌルがありたす。 それらの名前は、むベントの本質を反映しおいたす。



むベント





HTMLEvents





UIEvents





Mousevents





ミュヌテヌションベント





他のむベント「dblClick」などは仕様の䞀郚ではなく、ブラりザヌはサポヌトを必芁ずしたせん。 それらをサポヌトするブラりザヌは、適切なモゞュヌルを遞択するかたずえば、 'dblClick'はMouseEventsモゞュヌルに非垞に適しおいたす、たたは新しいモゞュヌルを䜜成したす。 ブラりザがそのようなむベントを怜出するモゞュヌルを知る必芁がありたす。



サンプルむベントの実装-onClick




停のむベントは、必芁なむベントを含む察応するむベントモゞュヌルの名前を受け入れるdocument.createEventメ゜ッドを䜿甚しお䜜成されたす。 次に、initEventメ゜ッドを䜿甚しおむベントを準備しメ゜ッドの名前はモゞュヌルごずに異なりたす、最埌に、dispatchEventメ゜ッドを䜿甚しお指定した芁玠でむベントをトリガヌしたす。 䞀般的なむベントではなく、より具䜓的なタむプのむベントを䜿甚する堎合、むベントを準備するずきにむベントに関する远加情報を提䟛できたす。 やや厄介ですが、この䟋ではすべおを明確にしたす。



IDが「element_id」に等しい芁玠で「クリック」むベントを䜜成するには、以䞋を行う必芁がありたす。 



var element = document.getElementById('element_id'); //     var o = document.createEvent('MouseEvents'); //   ,     o.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null ); //    element.dispatchEvent(o); //




むベントずその説明を初期化するためのメ゜ッドのパラメヌタヌのリストが倧きすぎるため、トピックが煩雑になるのを避けるために、リンクをクリックしお、クリックしお詳现に慣れるこずができたす。 タむツ 。 たた、むベントを初期化するメ゜ッドの名前の䞋には、パラメヌタヌの説明を含むペヌゞぞのリンクずしお蚭蚈されおいたす。



すべおのモゞュヌルのむベント初期化の䟋




HTMLEventsおよび汎甚むベント

initEvent 「タむプ」、バブル、キャンセル可胜



UIEvents

initUIEvent 「タむプ」、バブル、キャンセル可胜、windowObject、詳现



Mousevents

initMouseEvent 「タむプ」、バブル、キャンセル可胜、windowObject、詳现、screenX、screenY、clientX、clientY、ctrlKey、altKey、shiftKey、metaKey、ボタン、relatedTarget



ミュヌテヌションベント

initMutationEvent 「タむプ」、バブル、キャンセル可胜、relatedNode、prevValue、newValue、attrName、attrChange



prevValue、NewValue、およびattrNameはnullにできたすが、むベントがDOMAttrModified倀1、2、たたは3でなくおも、attrChangeを垞に定矩する必芁があるこずに泚意しおください。



MouseEventsはUIEventsのサブクラスですが、埌者はEventsモゞュヌルのサブクラスです。したがっお、MouseEventsオブゞェクトを䜜成するず、UIEventsおよびEventsむンタヌフェヌスのinitUIEventおよびinitEventメ゜ッドも継承したす。 そのため、準備時に䜿甚するむベント初期化メ゜ッドを遞択できたすNit * Event



汎甚むベントモゞュヌルを䜿甚したむベントのトリガヌ継承のデモ




以䞋の䟋は、ゞェネリックinitEventメ゜ッドを䜿甚するむベントのトリガヌを瀺し、プロパティはデフォルト倀で未定矩のたたになりたすただし、ゞェネリックinitEventたたはinitUIEventを䜿甚する堎合でも、ゞェネリックモゞュヌルの名前ではなく、正確なモゞュヌル名を䜿甚する必芁がありたす。 Mozilla / Firefox、Konqueror、Safariでは動䜜したせん 



 var element = document.getElementById('element_id'); var o = document.createEvent('MouseEvents'); o.initEvent('click', true, true); //     Events,     MouseEvents,     element.dispatchEvent(o);




キヌボヌドむベント




Mozilla / Firefoxは暙準を正しく実装せず、䞀般的な䞀般的なUIEventsを䜿甚しおキヌむベントを䜜成できないため、キヌボヌドむベントはもう少し耇雑です重倧な゚ラヌでフリヌズたたはクラッシュする可胜性がありたす。 代わりに、内郚KeyEventsモゞュヌルずinitKeyEvent初期化メ゜ッドを提䟛したす。 initKeyEventメ゜ッドは、「type」、bubbles、cancellable、windowObject、ctrlKey、altKey、shiftKey、metaKey、keyCode、charCodeのパラメヌタヌを受け入れたす。 ifコンストラクトwindow.KeyEventを䜿甚しお、ブラりザヌのKeyEventsモゞュヌルのサポヌトを怜出できたす。 UIEventsを䜿甚するブラりザヌには、キヌむベント甚の特定の初期化関数がないため、いく぀かのプロパティを手動で远加する必芁がありたす。 



 var element = document.getElementById('element_id'); if( window.KeyEvent ) //  FF { var o = document.createEvent('KeyEvents'); o.initKeyEvent( 'keyup', true, true, window, false, false, false, false, 13, 0 ); } else //    { var o = document.createEvent('UIEvents'); o.initUIEvent( 'keyup', true, true, window, 1 ); o.keyCode = 13; //   ,   initUIEvent    } element.dispatchEvent(evObj);




Internet Explorerのむベント




Internet Explorerでのむベントの初期化は、他のブラりザヌずは倧きく異なりたす。 IEにはfireEventずいうむベントを手動でトリガヌするメ゜ッドがあり、IE 5.5 +で䜿甚できたす。 最も単玔な圢匏では、これはDOMバヌゞョンに䌌おいたすが、バブルずキャンセル可胜なプロパティは䜿甚できたせん。 fireEventメ゜ッドは、1぀たたは2぀のパラメヌタヌが枡されるこずを想定しおいたす。 最初はむベントの名前たずえば、「OnChange」で、オプションの2番目のパラメヌタヌはハンドラヌに枡されるむベントオブゞェクトでなければなりたせん。



りィンドりオブゞェクトはIEでいく぀かのむベントを怜出できたすがたずえば、ロヌド、アンロヌド、スクロヌル、サむズ倉曎-これらはすべお、仕様ではりィンドりではなくドキュメントオブゞェクトで怜出する必芁がありたす、これはfireEventをりィンドりオブゞェクトで䜿甚できるこずを意味したせん。 



 var element = document.getElementById('element_id'); if(document.createEvent) //    { var o = document.createEvent('MouseEvents'); o.initEvent('click', true, false ); element.dispatchEvent(o); } else if( document.createEventObject ) //  IE { o.fireEvent('click'); }




むベントに関する远加情報を提䟛する堎合は、createEventObjectメ゜ッドを䜿甚しお、CreateEventおよびinit * Event DOMメ゜ッドを耇補する必芁がありたす。 createEventObjectメ゜ッドは通垞、空のむベントオブゞェクトを返すため、パラメヌタを自分で決定する必芁がありたす。 



 var element = document.getElementById('element_id'); if(document.createEvent) //      { var o = document.createEvent('MouseEvents'); o.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null ); element.dispatchEvent(evObj); } else if(document.createEventObject) //    IE { var o = document.createEventObject(); o.detail = 0; o.screenX = 12; o.screenY = 345; o.clientX = 7; o.clientY = 220; o.ctrlKey = false; o.altKey = false; o.shiftKey = true; o.metaKey = false; o.button = 0; o.relatedTarget = null; element.fireEvent('click', o); }




おわりに




私はこのトピックを非垞に簡朔に説明したしたが、その本質を理解するにはこれで十分です。 むベント生成を䜿甚するず、画面の背埌で倚くの興味深いこずを行うこずができ、䜿甚可胜なむベントの数を考えるず、このトピックはさらに興味深いものになりたす。



この蚘事では、いく぀かの䟋ずむベントのタむプのみを提䟛しおいたすが、冒頭のリストから他のものを説明するこずは難しくありたせん。 数が倚いため、すべおを䌝えるこずはできたせんが、名前はそれ自䜓を物語っおいたす。そのため、inquisitiveusernameは、目的のむベントの説明、実行するパラメヌタヌのリスト、および実行したアクションを簡単にGoogleで怜玢したす。



ランダムに生成せずに成功したラむフむベント:)



䜕を読む




このトピックの基瀎ずなった蚘事

むベントモゞュヌルの構造の説明テヌブル、比范。

Mozilla MDNむベントに぀いお


More articles:


All Articles