HTML中支持内嵌JavaScript事件子标记吗？

在这里，我们有一个onclick处理一个div：HTML中支持内嵌JavaScript事件子标记吗？

<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，尽管您并不关心这里的最佳实践，但如果要保持标记清洁和组织，则应避免使用它们。

您正在寻找的是第三个示例中的<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

第二个示例是有效的HTML。第三个例子*已经使用了*

HTML中支持内嵌JavaScript事件子标记吗？

回答

相关问题