タグ付けされた質問 「dom-events」

DOM(Document Object Model)イベントを使用すると、イベント駆動型プログラミング言語でDOMツリー内の要素ノードにさまざまなイベントハンドラー/リスナーを登録できます。

12
html <input type =“ text” /> onchangeイベントが機能しない
私はいくつかの実験をしようとしています。私がしたいのは、ユーザーがテキストボックスに何かを入力するたびに、それがダイアログボックスに表示されることです。onchangeイベントプロパティを使用してそれを実現しましたが、機能しません。それを機能させるには、送信ボタンを押す必要があります。私はAJAXについて読み、これについて学ぶことを考えています。それを機能させるにはまだAJAXが必要ですか、それとも単純なJavaScriptで十分ですか?助けてください。 index.php &lt;script type="text/javascript" src="javascript.js"&gt; &lt;/script&gt; &lt;form action="index.php" method="get"&gt; Integer 1: &lt;input type="text" id="num1" name="num1" onchange="checkInput('num1');" /&gt; &lt;br /&gt; Integer 2: &lt;input type="text" id="num2" name="num2" onchange="checkInput('num2');" /&gt; &lt;br /&gt; &lt;input type="submit" value="Compute" /&gt; &lt;/form&gt; javascript.js function checkInput(textbox) { var textInput = document.getElementById(textbox).value; alert(textInput); }

2
要素を削除する前にイベントリスナーを削除する必要がありますか?
イベントリスナーがバインドされている子を持つ親要素がある場合、親をクリアする前にそれらのイベントリスナーを削除する必要がありますか?(つまりparent.innerHTML = '';)要素がDOMから削除された場合に、イベントリスナーが要素からバインド解除されていない場合、メモリリークが発生する可能性がありますか?

4
event.preventDefault()vs。return false(jQueryなし)
event.preventDefault()とreturn falseは同じかと思いました。 私はいくつかのテストを行いました、そしてそれは たとえば、イベントハンドラが古いモデルを使用して追加された場合 elem.onclick = function(){ return false; }; 次に、のreturn falseようなデフォルトのアクションを防ぎますevent.preventDefault()。 たとえば、を使用してイベントハンドラが追加さaddEventListenerれた場合 elem.addEventListener( 'click', function(e){ return false; }, false ); 次に、return falseデフォルトのアクションを妨げません。 すべてのブラウザはこのように動作しますか? との間にもっと違いはevent.preventDefault()ありreturn falseますか? 場合によっては、そのreturn falseようevent.preventDefault()に動作することに関するドキュメント(MDNでは見つかりませんでした)はどこにありますか? 私の質問はプレーンなJavaScriptに関するものであり、jQueryに関するものではないため、両方の質問のタイトルがほぼ同じであっても、event.preventDefault()の重複としてマークしないでください。

7
入力要素のJavascript変更イベントは、フォーカスを失ったときにのみ発生します
入力要素があり、コンテンツの長さをチェックし続けたいのですが、長さが特定のサイズに等しくなるたびに送信ボタンを有効にしたいのですが、イベントとしてのJavascriptのonchangeイベントで問題が発生しています入力要素がスコープ外になったときにのみ発生し、内容が変更されたときには発生しません。 &lt;input type="text" id="name" onchange="checkLength(this.value)" /&gt; ---- onchangeは、名前の内容を変更しても発生しませんが、名前のフォーカスが外れた場合にのみ発生します。 このイベントをコンテンツの変更で機能させるためにできることはありますか?または私がこれに使用できる他のイベント?onkeyup関数を使用して回避策を見つけましたが、ブラウザーのオートコンプリーターから一部のコンテンツを選択しても起動しません。 キーボードでもマウスでも、フィールドの内容が変わっても機能するものが欲しいのですが…何かアイデアはありますか?

11
HTML5履歴ポップステートでのブラウザのスクロールを防止する
popstateイベントが発生したときにドキュメントをスクロールするデフォルトの動作を防ぐことは可能ですか? 私たちのサイトはjQueryアニメーションスクロールとHistory.jsを使用しており、状態の変更により、pushstateまたはpopstateを介して、ページのさまざまな領域にユーザーをスクロールする必要があります。問題は、popstateイベントが発生すると、ブラウザが前の状態のスクロール位置を自動的に復元することです。 ドキュメントの幅と高さを100%に設定したコンテナ要素を使用して、そのコンテナ内のコンテンツをスクロールしてみました。私が見つけた問題は、ドキュメントのスクロールほどスムーズではないように見えることです。特にボックスシャドウやグラデーションのようなcss3をたくさん使用する場合。 また、ユーザーがスクロールを開始したときにドキュメントのスクロール位置を保存し、ブラウザーがページをスクロールした後にドキュメントを復元しようとしました(popstateで)。これはFirefox12では正常に機能しますが、Chrome 19では、ページがスクロールされて復元されるためにちらつきがあります。これは、スクロールとスクロールイベントが発生するまでの遅延(スクロール位置が復元される場所)に関係していると思います。 Firefoxはpopstateが起動する前にページをスクロールし(そしてscrollイベントを起動し)、Chromeは最初にpopstateを起動してからドキュメントをスクロールします。 履歴APIを使用している私が見たすべてのサイトは、上記と同様のソリューションを使用するか、ユーザーが前後に移動したときのスクロール位置の変更を無視します(GitHubなど)。 popstateイベントでドキュメントがスクロールされないようにすることは可能ですか?

9
onclick関数で「this」参照を保持しながら、アンカータグからonclick()イベントをプログラムで呼び出すにはどうすればよいですか?
以下は機能しません...(少なくともFirefoxでは:document.getElementById('linkid').click()機能ではありません) &lt;script type="text/javascript"&gt; function doOnClick() { document.getElementById('linkid').click(); //Should alert('/testlocation'); } &lt;/script&gt; &lt;a id="linkid" href="/testlocation" onclick="alert(this.href);"&gt;Testlink&lt;/a&gt;

8
JavaScriptでロックを実装する方法
lockC#と同等のものをJavaScriptでどのように実装できますか? したがって、私が考えている簡単なユースケースを説明すると、次のようになります。 ユーザーがボタンをクリックしますB。 Bonclickイベントを発生させます。がイベントにある場合Bは、伝播する前にが存在するのをevent-state待ちます。場合であり、ロックされ、に設定され、その後、イベントが伝搬します。イベントの伝播が完了すると、はに設定されます。Bready-stateBready-stateBevent-stateBready-state ready-stateボタンにクラスを追加したり、ボタンからクラスを削除したりするだけで、これに近いことがどのように行われるかがわかりました。ただし、問題は、ユーザーが変数を設定するよりも速くボタンを2回続けてクリックできるため、状況によってはこのロックの試行が失敗することです。 JavaScriptで失敗しないロックを実装する方法を知っている人はいますか?

7
Javascriptコードでチェックされている場合でも、チェックボックスのクリックイベントをトリガーするにはどうすればよいですか?
ページに多くのチェックボックスがあり、すべてのチェックボックスをチェックする[すべて選択]チェックボックスがあります。どういうわけか、すべて選択ボタンでチェックされている/チェックされていない場合でも、チェックボックスのクリックイベントをエミュレートしたいと思います。どうすればいいですか?
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.