JavaScript フレームワークは非常に多くの機能を提供しているため、注意しないと簡単に陥りやすくなります。 ツール ライブラリに依存するほど、特に何年も前のレガシー コードをメンテナンスする場合、修正やメンテナンス中の小さな変更が他の機能に影響を与える可能性があります (どこにでも地雷があるため、歩く際には注意が必要であることが一般的に知られています)。 私がよく目にする間違いの 1 つは、開発者が特定のイベントを手動でトリガーできるようにする jQuery のトリガーに関するものです。 この関数は非常に強力で使いやすいですが、規則に従って、JS でこれらのネイティブ イベント名をトリガーしないでください。
注: 他の JS フレームワークでもこの関数が提供されていることは知っています。ここでは例として jQuery のみを使用します。 、なぜなら私はその人気を見て、つい最近この問題に遭遇したからです。 すべてのツール ライブラリで同じ問題が発生する可能性があります。 たとえば、MooTools は fireEvent などを使用します。
以下は、トリガーを使用してタスクを完了する典型的な例です。
// クリック イベントをリッスンします
jQuery('.tabs a').on('click', function() {
// インターフェイスの切り替えなどの特定の操作を実行します、コンテンツの読み込みなど。
});
// 最後の a タグでクリック イベントをトリガーします
jQuery('.tabs a').last().trigger('click' );
上記のコードは、指定されたインデックスのタブ タグを開きます。 開発者がこれらの処理にトリガーを使用する理由は完全に理解しています。通常、トリガーされる関数はグローバルに利用できないのに対し、イベントのトリガーは簡単で常に利用できるためです。 問題は、トリガーにネイティブ イベント名を使用すると、... トリガー... 言い表せない害を引き起こす可能性があることです。サイトの他の場所に追加されたコンテンツを見てみましょう:
// 本体内のすべてのクリック イベントをリッスンします
jQuery('body').on('click', 'a', function() {
// 一部のビジネス ロジック処理はここで実行されます。 .
// 条件が満たされた場合 (条件が満たされた場合)、他の操作を実行します。
// ページを更新しますか?サブメニューを開きますか?
// フォームを送信しますか?
// ... デン・デン・デン、インテル
}
}); ここで問題が発生しました。 - タブクリックイベントは、完全に独立した別の部分によって監視される可能性があるため、処理がさらに面倒になります。 笑、最善の解決策は、ネイティブ イベントの後にカスタム イベント名を使用することです。
コードをコピーします
});
// 最後のタブで「false」イベントをトリガーします
jQuery('.tabs a' ).last().trigger ('tabs-click');
これで、イベント トリガーがページ上の他のリスナーと競合しなくなります。 保守的な開発者は、(他のライブラリと同様に) トリガーの使用を避けたほうがよいかもしれないが、とにかくカスタム イベント名を追加する必要があると私に言います。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
