インライン onclick 属性とイベント リスナー: イベントの処理にはどちらが適していますか?

<p>

<p>インライン onclick 属性とイベント リスナー

<p>多くの開発者は、次に示すように、シンプルさとデバッグの容易さのためにインライン イベント ハンドラーの使用を好みます。コード:

<p>

<p>ただし、一般的には次のことをお勧めします。代わりにイベント リスナーを使用してください。

<p>イベント リスナーの利点

<p>イベント リスナーの主な利点は、プレゼンテーションとロジックが分離されていることです。インライン イベント ハンドラーは、HTML 内にコードを直接埋め込むため、コードベースが不必要に乱雑になり、保守が困難になる可能性があります。

<p>インライン イベント ハンドラーの評価では、さらに重大な問題が発生します。これらのイベント ハンドラーは、スコープ ルールに基づいてそのようなアクセスが可能ではない場合でも、祖先要素および要素自体のプロパティにアクセスします。

<p>たとえば、次の HTML を考えてみましょう。

<form>
    <input name="foo" />
    <button type="button" onclick="console.log(foo); console.log(window.foo);">
        Click me
    </button>
    <div onclick="console.log(foo);">Click me as well!</div>
</form>

<p> ボタンまたは

をクリックすると、foo はスコープ外であるはずであるにもかかわらず、foo 入力フィールドの値がログに記録されます。これらのイベント ハンドラー。この異常な動作は、エラーや予期しない結果につながる可能性があります。

<p>次のようなイベント リスナーを使用すると、イベント ハンドラー関数とそのスコープを明示的に定義し、これらの評価異常を防ぎ、コードの動作をより予測可能にします。

以上がインライン onclick 属性とイベント リスナー: イベントの処理にはどちらが適していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html define for using Event function this input issue Access

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。