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

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

9
Angular 4でのリアルタイムのウィンドウサイズ変更の検出
私はレスポンシブなナビゲーションバーを構築しようとしており、メディアクエリを使用したくないので*ngIF、ウィンドウサイズを基準として使用するつもりです。しかし、Angular 4のウィンドウサイズの検出に関する方法やドキュメントが見つからないため、問題に直面しています。JavaScriptメソッドも試しましたが、サポートされていません。 私は以下も試しました： constructor(platform: Platform) { platform.ready().then((readySource) => { console.log('Width: ' + platform.width()); console.log('Height: ' + platform.height()); }); } ...これはイオンで使用されました。 そしてscreen.availHeight、まだ成功していません。
118 html  angular  dom-events 
13
子孫のイベントリスナーを破壊せずにinnerHTMLに追加することは可能ですか？
次のコード例では、onclick「foo」というテキストを含むスパンにイベントハンドラーをアタッチしています。ハンドラは、をポップアップする無名関数ですalert()。 ただし、親ノードのに割り当てた場合innerHTML、このonclickイベントハンドラーは破棄されます。「foo」をクリックすると、アラートボックスがポップアップ表示されません。 これは修正可能ですか？ <html> <head> <script type="text/javascript"> function start () { myspan = document.getElementById("myspan"); myspan.onclick = function() { alert ("hi"); }; mydiv = document.getElementById("mydiv"); mydiv.innerHTML += "bar"; } </script> </head> <body onload="start()"> <div id="mydiv" style="border: solid red 2px"> <span id="myspan">foo</span> </div> </body> </html>
11
execCommandの「プレーンテキストとして貼り付ける」ためのJavaScriptトリック
execCommandここで紹介されているサンプルに従うことに基づいた基本的なエディターがあります。execCommandエリア内にテキストを貼り付ける方法は3つあります。 Ctrl+V 右クリック->貼り付け 右クリック->プレーンテキストとして貼り付け HTMLマークアップなしでプレーンテキストのみを貼り付けることを許可します。最初の2つのアクションを強制的にプレーンテキストに貼り付けるにはどうすればよいですか？ 考えられる解決策：（Ctrl+ V）のキーアップイベントのリスナーを設定し、貼り付ける前にHTMLタグを取り除くことです。 それは最善の解決策ですか？ 貼り付けでHTMLマークアップを回避することは防弾ですか？ リスナーを右クリック->貼り付けに追加する方法は？
5
addEventListenerを使用してノードにアタッチされたイベントリスナーを取得する
私はすでにこれらの質問を見てきました： デバッグ時またはJavaScriptコードからDOMノードのイベントリスナーを見つける方法は？ プログラムでHTML要素のJavaScriptイベントハンドラーを調べて変更できますか？ Firebug（または同様のツール）を使用してJavaScript / jQueryイベントバインディングをデバッグする方法 ただし、いずれも、イベントリスナーが作成される前にプロトタイプaddEventListenerを変更せずに、を使用してノードにアタッチされたイベントリスナーのリストを取得する方法に答えていませんaddEventListener。 VisualEventがすべてのイベントリスナー（iphone固有のもの）を表示しないため、これを（ある程度）プログラムで実行したいと考えています。
10
アレイの変更を監視する方法は？
Javascriptで、プッシュ、ポップ、シフト、またはインデックスベースの割り当てを使用して配列が変更されたときに通知される方法はありますか？処理できるイベントを発生させるものが欲しいのですが。 watch()SpiderMonkey の機能については知っていますが、変数全体が別の値に設定されている場合にのみ機能します。
14
動的にアタッチされたイベントリスナーが存在するかどうかを確認するにはどうすればよいですか？
これが私の問題です：動的にアタッチされたイベントリスナーの存在を何らかの方法でチェックすることは可能ですか？または、DOMの「onclick」（？）プロパティのステータスを確認するにはどうすればよいですか？Stack Overflowと同じようにインターネットで解決策を探しましたが、うまくいきませんでした。これが私のhtmlです： <a id="link1" onclick="linkclick(event)"> link 1 </a> <a id="link2"> link 2 </a> <!-- without inline onclick handler --> 次に、JavaScriptで動的に作成されたイベントリスナーを2番目のリンクにアタッチします。 document.getElementById('link2').addEventListener('click', linkclick, false); コードは問題なく実行されますが、接続されたリスナーを検出しようとする私の試みはすべて失敗します。 // test for #link2 - dynamically created eventlistener alert(elem.onclick); // null alert(elem.hasAttribute('onclick')); // false alert(elem.click); // function click(){[native code]} // btw, what's this? jsFiddleはこちらです。「onclick for 2を追加」をクリックしてから「[リンク2]」をクリックすると、イベントは正常に起動しますが、「テストリンク2」は常にfalseを報告します。誰か助けてもらえますか？
13
JavaScriptの無名関数に対するremoveEventListener
その中にメソッドを持つオブジェクトがあります。これらのメソッドは、無名関数内のオブジェクトに配置されます。次のようになります。 var t = {}; window.document.addEventListener("keydown", function(e) { t.scroll = function(x, y) { window.scrollBy(x, y); }; t.scrollTo = function(x, y) { window.scrollTo(x, y); }; }); （もっと多くのコードがありますが、これは問題を示すのに十分です） 次に、イベントリスナーを停止したい場合があります。したがって、私はremoveEventListenerを実行しようとしていますが、これを行う方法を理解できません。他の質問で、匿名関数でremoveEventListenerを呼び出すことは不可能であると読みましたが、これはこの状況の場合にも当てはまりますか？ 無名関数内に作成されたメソッドがあり、それが可能だと思いました。このように見えます： t.disable = function() { window.document.removeEventListener("keydown", this, false); } なぜこれができないのですか？ これを行う他の（良い）方法はありますか？ ボーナス情報; これはSafariでのみ機能する必要があるため、IEサポートがありません。
14
ReactJSでどのようにホバーしますか？-onMouseLeaveが高速ホバーオーバー中に登録されない
インラインスタイリングを行うときに、ReactJSでホバーイベントまたはアクティブイベントをどのように達成できますか？ onMouseEnter、onMouseLeaveのアプローチにはバグがあることがわかったので、別の方法があることを期待しています。 具体的には、コンポーネントにすばやくマウスを合わせると、onMouseEnterイベントのみが登録されます。onMouseLeaveは起動しないため、状態を更新できません...コンポーネントがまだホバーされているように見えます。「：active」css疑似クラスを模倣した場合も、同じことに気づきました。本当に速くクリックすると、onMouseDownイベントだけが登録されます。onMouseUpイベントは無視されます...コンポーネントはアクティブなままです。 これが問題を示すJSFiddleです：https ://jsfiddle.net/y9swecyu/5/ 問題のあるJSFiddleのビデオ：https ://vid.me/ZJEO コード： var Hover = React.createClass({ getInitialState: function() { return { hover: false }; }, onMouseEnterHandler: function() { this.setState({ hover: true }); console.log('enter'); }, onMouseLeaveHandler: function() { this.setState({ hover: false }); console.log('leave'); }, render: function() { var inner = normal; if(this.state.hover) { inner = …
12
jQueryの要素によって発生したすべてのイベントをどのように記録しますか？
ユーザーが入力フィールドを操作するときに入力フィールドによって発生するすべてのイベントを見たいのですが。これには次のようなものが含まれます。 それをクリックしてください。 それをクリックしてオフにします。 それにタブを入れます。 それから離れてタブ。 Ctrlキーボードの+ CとCtrl+ V。 右クリック->貼り付け。 右クリック->カット。 右クリック->コピー。 別のアプリケーションからテキストをドラッグアンドドロップする。 Javascriptで変更する。 Firebugなどのデバッグツールで変更する。 で表示したいのconsole.logですが。これはJavascript / jQueryで可能ですか？可能な場合、どうすればよいですか？
11
ブラウザ間でCSS3トランジション機能を正規化するにはどうすればよいですか？
Webkitの移行終了イベントはwebkitTransitionEndと呼ばれ、FirefoxはtransitionEnd、オペラはoTransitionEndです。純粋なJSでそれらすべてに取り組む良い方法は何ですか？ブラウザをスニッフィングする必要がありますか？またはそれぞれを個別に実装しますか？私には思いつかなかった他の方法がありますか？ つまり： //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); または // Assigning an event listener per browser element.addEventListener("webkitTransitionEnd", fn); element.addEventListener("oTransitionEnd", fn); element.addEventListener("transitionEnd", fn); function fn() { //do whatever }
6
Reactでは、onChangeとonInputの違いは何ですか？
私はこれに対する答えを探し回ってみましたが、それらのほとんどはReactのコンテキスト外にあり、onChangeブラー時にトリガーされます。 さまざまなテストを実行しているときに、これら2つのイベントがどのように異なるのか（テキスト領域に適用した場合）がわかりません。誰かがこれに光を当てることができますか？
7
window.location.hrefが変更されたときのイベント
ある時点で変更するサイトのGreasemonkeyスクリプトを書いていlocation.hrefます。 ページが変更されたwindow.addEventListenerときに（または同様の方法で）イベントを取得するにはどうすればよいwindow.location.hrefですか？また、新しい/変更されたURLを指すドキュメントのDOMにアクセスする必要があります。 タイムアウトとポーリングを含む他の解決策を見てきましたが、可能であればそれを避けたいと思います。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.