onclick="";与事件处理程序

Question

如果我想要执行一个函数，我更喜欢使用内联js：

<p id="element" onclick="doSomething();">Click me</p>

因为它更容易调试。

但是，我听到人们说不要使用内联js，并且这样做：

document.getElementById('element').onclick = doSomething;

为什么推荐使用js事件监听器？

Answer 1

反对内联事件处理程序的一个重要论点，以及这里其他答案所解决的论点是 分离表示和逻辑。

然而，在我看来，实际上存在一个更大的问题：内联事件处理程序的评估方式有些难以捉摸。

您可能知道，on* 属性的内容将用作事件处理函数的body。但这个功能有什么特点呢？

令人惊讶的事情之一是某些祖先元素的属性和元素本身在内联事件处理程序的范围中。

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

单击按钮登录

<input name="foo"></input>
undefined

控制台。 window.foo 为 undefined 的事实告诉您不存在全局变量 foo。那么变量 foo 从哪里来呢？为什么 console.log(foo) 记录输入元素而不引发引用错误？
因为 form 元素的属性位于事件处理程序的范围内，并且 form 元素对其包含的每个命名表单控件元素都有一个属性。您可以使用console.log(document.querySelector('form').foo)轻松测试这一点。

现在，单击 div 元素实际上会引发引用错误：

ReferenceError: foo 未定义

所以显然 form 元素仅在表单控制元素的范围内，而不是任何后代。这有多令人困惑？

同样，文档的属性 对象也在内联事件处理程序的范围内，这可能会导致一些令人惊讶的错误（您知道吗？ 文档有属性插件？）。

HTML5 规范中明确了如何评估内联事件处理程序。在步骤 10 处有一个循环，特别是在其中描述了作用域链的创建。

---

结论：

由于元素和内联事件处理程序之间的这种隐式连接，错误可能很难跟踪。如果您只想测试某些内容，那么使用内联事件处理程序当然没问题。但在生产代码中使用它们会带来更高的维护成本。

quirksmode.org 上的文章解释了绑定事件处理程序及其（dis）的不同方法优点很好。

Answer 2

基本上，我相信这与整体保持一切分离有关。因此，请将 HTML/CSS/JS 全部分开。它使您的 HTML 更加整洁，而且我认为，如果没有它，导航也更容易。

然后，当/如果您需要进行较大的更改时，您有足够的空间，无论如何都必须将内联 JS 转移到外部文件，或者如果您想将相同的功能应用于多个按钮，那么代码就更少了。更少的代码是一个更快乐的地方

如果你有正确的 JS 文件，并且有完整的文档，那么由外部人员导航它们就会变得更容易

Answer 3

避免使用内联 JavaScript 的原因有很多，其中最重要的原因之一可能是代码的可维护性。

一个简单的例子（我使用 jQuery 只是为了演示目的）。

<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>

如果您突然收到更改所有段落以执行另一个功能的请求怎么办？在您的示例中，您必须手动更改 HTML 代码中的所有内容。但是，如果您选择将 HTML 与 JavaScript 分开，您可以简单地这样做。

<p class="element">Click me</p>
<p class="element">Click me</p>
<p class="element">Click me</p>
<p class="element">Click me</p>
<p class="element">Click me</p>
<p class="element">Click me</p>

$('.element').bind('click', doSomethingElse);

HTML 代码也更加清晰，这使得设计人员能够专注于设计，而不必担心他们在处理涉及其他人的项目时可能会真正破坏某些东西。

编辑：为我的评论提供示例。

Project = {
    // All the variables/constants/objects that need to be globally accessible inside the Project object.

    init : function(){
        // Main entry point...
        this.MainMenu.init();

        // Rest of the code which should execute the moment Project is initiated.
    }
}

Project.MainMenu = {
    // All the variables/constants/objects that need to be accessible only to MainMenu.

    init : function(){ // Is run immediatelly by Project.init()
        // Event handlers relevant to the main menu are bound here

        // Rest of the initialization code
    }
}

Project.SlideShow = {
    // All the variables/constants/objects that need to be accessible only to SlideShow.

    init : function(){ // Is run only on pages that really require it.
        // Event handlers for the slideshow.
    }
}

Answer 4

不管其他人怎么想，我认为在标记中内联侦听器具有可取的价值。具体来说，它为您提供了更多修改 DOM 节点的自由。如果您通过 JavaScript 添加侦听器，则当您替换任何父节点的innerHTML 时，侦听器将会丢失。如果您在标记中内联侦听器，则可以克隆该节点，对其进行修改，然后将原始节点替换为您刚刚克隆和修改的节点。

也许最好在特定的用例中描述它。我想对文档的多个部分进行更改而不多次触发回流。因此，在这种情况下，我可以克隆该节点，对其进行任何更改（自分离以来没有回流），然后用修改后的节点替换前一个节点（触发一次回流）。对于内联侦听器，这可以防止任何侦听器在替换过程中丢失。

Answer 5

我看到有人说需要将表示和业务逻辑的关注点分开。

OP 在他的例子中确实显示了这种分离！内联事件处理程序中没有逻辑，而只是在“单击”事件上执行的函数引用/调用...逻辑本身可以在其他地方单独维护。

由于逻辑流的可发现性，我个人更喜欢这种方法。如果我以前从未见过应用程序...我要开始遍历代码的第一个地方是在 DOM 中，就在那里，可以清楚哪些事件处理程序正在发挥作用以及哪些函数正在为应用程序提供逻辑。处理程序。通过使用“JQuery.On”事件方法，只需浏览 html，您将不知道哪些处理程序实际上已连接并提供功能。

仅提供函数指针的内联事件处理程序只是简单地连接事件，而不会将逻辑泄漏到表示中。

Answer 6

对于 CSS 和内联样式，您也可以这么说。不必费力地通过 css 文件来查找当前的类/id 或您使用的父/子元素，这将是很容易的。

绑定一次点击来内联说出 10 个不同的项目真的更好吗？或者只是一个针对某个类的事件处理程序？即使您不需要 10 个单击处理程序，设置代码以实现可维护性并在以后进行升级始终是一个更好的主意。

Answer 7

除了编码标准角度之外

使用属性：

，请点击我

如果您添加 再次相同的属性（见下文）- 考虑最新的属性。

点击我

使用事件处理程序：

document.getElementById(' element').onclick = doSomething;

假设您添加了以下行

document.getElementById('element').onclick = doSomethingMore;
两个处理程序都被调用。

Answer 8

我不知道使用内联处理程序与稍后附加处理程序的优势。根据我的经验，当我必须处理动态元素时，我更喜欢使用内联方法，例如，如果我想向每个图像添加一个处理程序，并且图像数量根据其他数据（例如数据库中的图像）而变化。在这种情况下，使用内联允许我向每个图像添加一个处理程序，否则我必须重新计算 javascript 文件中要附加到每个图像的图像数量和处理程序。

当然，当您可以使用像 jQuery 这样可以轻松获取内联元素列表的库时，这并没有什么用处

Answer 9

令我惊讶的是，没有人提到内容安全策略 (CSP) 作为使用事件属性代替事件属性的原因。我认为这胜过迄今为止给出的任何个人偏好。

当正确实现时（即不添加“不安全内联”，恕我直言，这完全是无稽之谈）CSP1.0 基本上会阻止所有形式的内联脚本。使内联事件属性变得不可能。虽然 CSP2.0 尝试通过为内联脚本提供“随机数”来解决此问题，但它没有为内联事件属性提供这样的东西。 CSP3.0 为内联事件添加了“不安全哈希”，但仍然没有随机数的迹象。

因此，在缺乏内联事件随机数的情况下，从 CSP 的角度来看，事件属性（或事件侦听器）是非常好的方法。