ホームページ >ウェブフロントエンド >jsチュートリアル >onClick イベント ハンドラー内で ES6 モジュール関数にアクセスするにはどうすればよいですか?
ES6 モジュールと Onclick 関数のアクセシビリティ
onclick イベント ハンドラーで使用するために ES6 モジュールから関数をインポートする場合は、スコープの性質を考慮することが重要ですモジュールの。デフォルトでは、モジュールは名前の衝突を防ぐために別のスコープを作成します。
提供されたコード例では、インポートされた hello 関数がモジュール スコープ内で定義されているため、onclick ハンドラーで直接アクセスできないために問題が発生します。 .
これを解決するには、次の 2 つの推奨アプローチがあります。
イベントの使用リスナー:
このアプローチには、addEventListener メソッドを使用して、インポートされた関数を onclick イベントにバインドすることが含まれます。コードの修正バージョンは次のとおりです。
<button type="button">
Window オブジェクトに関数を公開する (非推奨):
もう 1 つのアプローチは、推奨されませんが、明示的に行うことです。インポートされた関数を window オブジェクトに公開します。ただし、この方法では、潜在的な名前の競合が発生する可能性があります。
import {hello} from './test.js' window.hello = hello
関数を window オブジェクトに公開すると、onclick ハンドラーとしてアクセスできるようになります。ただし、この方法はグローバル名前空間を汚染し、デバッグ作業を妨げる可能性があるため、お勧めできません。
以上がonClick イベント ハンドラー内で ES6 モジュール関数にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。