t_wの輪郭

Feedlyでフォローするボタン
あれ
技術情報を掘るときに、日本語で検索しても出てこないんだろうなという諦観があるJavaScriptでevent handlerを実装する標準的方法「[Javascript] イベント駆動型の設計ができるEventEmitterに入門」customeElementWatcherEventHandler.webidl『Domain events: design and implementation』Event handlerchromeEventHandlerFirefoxのDOMのEventHandlerの実装addEventListenerForElementの説明コメント の翻訳addEventListenerForElementの説明コメントaddEventListenerForElement(id, type, handler)

customeElementWatcher

2020/12/27 13:38:00

https://searchfox.org/mozilla-central/source/devtools/server/actors/targets/browsing-context.js#357

/
* The CustomElementWatcher can be used to be notified if a custom element definition
* is created for a node.
*
* When a custom element is defined for a monitored name, an "element-defined" event is
* fired with the following Object argument:
* - String name: name of the custom element defined
* - Set Set of impacted node actors
*/
class CustomElementWatcher extends EventEmitter {
constructor(chromeEventHandler) {

このヘルパーの他のメソッドと同様に、要素の ID を渡す必要があります。

コンテンツ ページが移動した場合、イベント リスナーは再び追加されないことに注意してください。

また、従来の DOM イベントとは異なり、ここで追加された bylisteners で処理されるイベントは、バブリングの段階でのみドキュメントを伝搬するので、useCapture パラメータはサポートされていないことに注意してください。

重要: クローム専用の canvasFrame 挿入 API は、挿入された要素への参照がクローム JS コードに漏れないように細心の注意を払っています。これは、そうでなければ、クローム JS コードがネイティブの anon elementsinside canvasFrame を自由に変更し、おそらくこのフレームを管理する C++ コードによって変更されないと仮定されているものを変更する可能性があるためです。https://wiki.mozilla.org/DevTools/Highlighter#The_AnonymousContent_APIUnfortunately を参照してください、挿入されたノードは、event を介してまだ利用可能です。 したがって、イベントがハンドラに渡される前に originalTarget プロパティは無効化されます。

詳細。イベントタイプごとに1つのイベントリスナーがブラウザレベルで追加され、イベントoriginalTargetが提供されたIDを持っていることが判明した場合、コールバックが実行されます（そして、originalTargetの親ノードのIDもチェックされます）。

param String id
param 文字列型
param 関数ハンドラ

/
* Add an event listener to one of the elements inserted in the canvasFrame
* native anonymous container.
* Like other methods in this helper, this requires the ID of the element to
* be passed in.
*
* Note that if the content page navigates, the event listeners won't be
* added again.
*
* Also note that unlike traditional DOM events, the events handled by
* listeners added here will propagate through the document only through
* bubbling phase, so the useCapture parameter isn't supported.
* It is possible however to call e.stopPropagation() to stop the bubbling.
*
* IMPORTANT: the chrome-only canvasFrame insertion API takes great care of
* not leaking references to inserted elements to chrome JS code. That's
* because otherwise, chrome JS code could freely modify native anon elements
* inside the canvasFrame and probably change things that are assumed not to
* change by the C++ code managing this frame.
* See https://wiki.mozilla.org/DevTools/Highlighter#The_AnonymousContent_API
* Unfortunately, the inserted nodes are still available via
* event.originalTarget, and that's what the event handler here uses to check
* that the event actually occured on the right element, but that also means
* consumers of this code would be able to access the inserted elements.
* Therefore, the originalTarget property will be nullified before the event
* is passed to your handler.
*
* IMPL DETAIL: A single event listener is added per event types only, at
* browser level and if the event originalTarget is found to have the provided
* ID, the callback is executed (and then IDs of parent nodes of the
* originalTarget are checked too).
*
* @param String id
* @param String type
* @param Function handler
*/