インラインJavaScriptイベントの子タグはHTMLでサポートされていますか？

ここでは、のonclickハンドラを持つdiv要素を持っています。クリックするとインラインJavaScriptイベントの子タグはHTMLでサポートされていますか？

<div id="BorderContainer1282" onclick="alert('hello')"> 
    <input id="Button925" type="button" value="Button"> 
</div >

それは、警告ダイアログが表示されます。同じ名前の子タグで

んHTMLのサポートインラインのJavaScript、そのよう：

<div id="BorderContainer1282"> 
    <onclick>alert('hello');</onclick> 
    <input id="Button925" type="button" value="Button"> 
</div >

この質問はベストプラクティスではありません。具体的には、HTMLで、この例に示すように、HTML要素の子タグでイベントを設定することをサポートしています。

注：私は例2で上記のコードをテストし、それは私のテストでは動作しません。

それが動作しない場合は、以下のテンプレートが許容選択肢で使用します：再び

<div id="BorderContainer1282"> 
    <script type="text/javascript"> 
     document.getElementById('BorderContainer1282').addEventListener("click", function(event) { 
      (function(event) { 
       alert('hello'); 
      }).call(document.getElementById("BorderContainer1282"), event); 
     }); 
    </script> 
    <input id="Button925" type="button" value="Button"> 
</div >

、私はこの機能がサポートされている場合にのみ、今のベストプラクティスを懸念していませんよ。

私は重複していない同様の質問hereを見つけました。

出典

2016-07-25 1.21 gigawatts

'' タグ？それはすでに属性として醜いですが、それは... Ps：HTMLでこれを見たことはありませんでしたが、おそらく長い前にいくつか？ PPs：あなたの最新の例で 'call（）'の目的は何ですか？ – Kaiido

私はこの呼び出しによって、 'this'リファレンスが別のオブジェクトではなくHTML要素を参照すると考えています。 –

間違った推測では、 'this'はイベントがアタッチされたオブジェクトを参照します。ここでは 'undefined'（ 'addEventListener（）'の結果）を呼び出しています。 – Kaiido

あなたの第二の例は、有効なHTMLではありません。 <onclick>タグはありません。最初の例でJavaScriptを実行できる理由は、特定のタグではEvent attributesです。

これらの属性を使用すると、特定のイベントが特定の要素でトリガされたときに任意のJavaScriptを実行できます。ここでのベストプラクティスには関係ありませんが、マークアップをきれいに整理してください。

3番目の例の<script>タグは、HTMLマークアップのどこにでもJavaScriptを挿入できるため、この場合に使用する必要があります。このタグとaddEventListenerを使用して、divにイベントハンドラを添付することができます。これは、このシナリオでは、タグの適切な使用である：

<div id="BorderContainer1282"> 
    <script type="text/javascript"> 
     document.getElementById("BorderContainer1282").addEventListener("click", function(e) { 
      alert("Hello!"); 
     }); 
    </script> 
    <input id="Button925" type="button" value="Button"> 
</div >

最後に、<script>タグは、一般的にスクリプトが実行される前に、すべての要素がロードされていることを確認するために<body>の最後に配置されています。また、JavaScriptをwindow.addEventListener("load", function(){ ... });にラップすることでこれを達成することもできます。

出典

2016-07-25 01:52:47 AstroCB

要素が宣言された後にスクリプトが置かれた場合、OPは正常です。 – Kaiido

2番目の例は有効なHTMLです。 3番目の例では、*すでに '

インラインJavaScriptイベントの子タグはHTMLでサポートされていますか？

答えて

関連する問題