javascript 事件处理

Question

我有一个查询。 我曾经以两种方式在 javascript 事件上调用 function。

在 HTML 标签内，如：

 <div id='someid' onmouseover='callFunc()'>Some Text</div>

脚本标签/外部文件中的外部标签：

 document.getElementById('someid').onmouseover=function(){ alert('hi'); }

现在我认为两者都有相同的目的，那么这两种方式有什么区别吗？ 哪一个更好？ 两者的优缺点是什么？ 二、有没有其他方法可以调用这个function？

Answer 1

两者都很糟糕。 你想要addEventListener 。 像jQuery这样的库将使这更容易，如下所示：

$('#someid').mouseover(function() { alert('hi') });

将 JavaScript 内联到 HTML 绝不是一个好主意； 它很难编写（你必须担心转义）并且很难维护。

直接分配给on*是可以的，但是对于同一个元素上的同一个事件，你不能有多个事件处理程序。 如果其他代码稍后尝试添加处理程序，它将清除您的处理程序。

Answer 2

最好将您的代码与html分开。

当您的所有代码都很好地组织在一个部分或单独的文件中时，维护您的代码会容易得多。