HTML是否支持內聯JavaScript事件子標記？

Question

這里有一個帶有onclick處理程序的div：

<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 >

同樣，僅當支持此功能時，我現在才擔心最佳實踐。

我在這里發現了一個類似的問題，但並非重復。

Answer 1

您的第二個示例不是有效的HTML。 沒有<onclick>標簽。 在第一個示例中能夠執行JavaScript的原因是由於某些標記的事件屬性。

這些屬性允許您在給定元素上觸發特定事件時執行任意JavaScript，盡管您在這里不關心最佳實踐，但如果要保持標記整潔有序，則應避免使用它們。

您正在尋找的是第三個示例中的<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(){ ... });來完成此操作window.addEventListener("load", function(){ ... }); 。

HTML是否支持內聯JavaScript事件子標記？

問題描述

1 個解決方案

解決方案1
0 2016-07-25 01:52:47

HTML是否支持內聯JavaScript事件子標記？

問題描述

1 個解決方案

解決方案1 0 2016-07-25 01:52:47

解決方案1
0 2016-07-25 01:52:47