内联Javascript（HTML）是如何工作的？

我知道这是个坏习惯。如果可能的话，不要这样写代码

当然，我们总是会发现自己处于这样的情况：一个聪明的内联Javascript片段可以快速解决问题

我提出这一问题是为了充分理解这样写的时候会发生什么（以及潜在的陷阱）：

<a href="#" onclick="alert('Hi')">Click Me</a>

这很有效。但我不知道这有多糟。它看起来可疑，因为没有从返回的明显函数

你可能会问，史蒂夫，你为什么这么做？内联JS是一种糟糕的做法

老实说，我已经厌倦了仅仅为了修改页面的一部分而编辑三个不同的代码部分，尤其是当我只是在原型化一些东西来看看它是否能工作的时候。在元素中定义与这个HTML元素特别相关的代码是非常容易的，有时甚至是有意义的：2分钟后，当我决定这是一个非常非常糟糕的想法时，我可以核掉整个div（或任何东西）我没有一堆神秘的JS和CSS碎片挂在页面的其余部分，稍微减慢了渲染速度。这类似于引用局部性的概念，但我们关注的不是缓存未命中，而是bug和代码膨胀

它看起来可疑，因为没有从返回的明显函数

它是一个匿名函数，已附加到对象的单击事件

你为什么这么做，史蒂夫

---

你到底为什么要这样做……啊，没关系，正如你所提到的，这确实是一种被广泛采用的坏习惯：）

当你有了浏览器时，浏览器会做什么

<a onclick="alert('Hi');" ... >

---

也就是说，它创建了一个需要“事件”参数的函数。（好吧，IE没有；它更像是一个简单的匿名函数。）

您已经得到了几乎正确的答案，但是您没有考虑提供给内联代码的

这个
值

<a href="#" onclick="alert(this)">Click Me</a>

回答你的问题最好的方法就是付诸行动

<a id="test" onclick="alert('test')"> test </a> ​

正如您在
控制台中看到的那样，如果您使用的是chrome，它会打印一个带有传入事件对象的匿名函数，尽管在IE中有点不同

function onclick(event) {
   alert('test')
}

我同意你关于内联事件处理程序的一些观点。是的，它们很容易编写，但我不同意你关于必须在多个地方更改代码的观点，如果你的代码结构良好，你就不需要这样做
 在控制台中尝试以下操作：

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

在Chrome中，它显示以下内容：

function onclick(event) {
  alert(event)
}

…而
div.onclick
的非标准
name
属性是
“onclick”

因此，这是否是匿名取决于您对“匿名”的定义。与类似于
var foo=new Function（）
的内容相比，其中
foo.name
是一个空字符串，
foo.toString（）
将产生类似的内容

function anonymous() {

}

在事件处理程序属性周围似乎有很多不好的做法。糟糕的做法是不知道并在最合适的地方使用可用的功能。事件属性完全是W3C文档化的标准，没有什么不好的做法。它与放置内联样式没有什么不同，内联样式也是W3C文档中的样式，有时也很有用。不管你是否将它包装在脚本标签中，它都将以相同的方式进行解释

使用javascript:

<input type="text" id="fname" onkeyup="javascript:{ console.log(window.event.key); alert('hello'); }">

这里使用输入元素

<input type="text" id="fname" onkeyup="javascript:console.log(window.event.key)">




如果要使用多行代码，请在javascript:

<input type="text" id="fname" onkeyup="javascript:{ console.log(window.event.key); alert('hello'); }">


您是对的，这是一个匿名函数。您需要在DOMready事件上钩住对
\click\me
的查询，或者将脚本放在节点之后。在控制台中，执行
document.getElementById（“click\me”）。onclick。或者提醒它。你会看到它在一个函数中。因此，我实际上可以使用变量
event
从内联JS代码片段中检索事件（以及通过
event.target
从中获取的原始元素）！Cool.IE确实没有传递
事件
参数，但是如果在这个匿名函数中使用
事件
，IE会将它理解为实际的事件对象。由于匿名函数在IE中被设置为
window
对象的属性，它会将其视为
window.event
。这是作为对Pointy答案的注释开始的，但实际上不作为注释工作。我认为他的答案确实是最好的。我认为像
测试登录
这样的东西非常适合原型设计。您现在想测试一些需要用户交互的东西，但稍后还是要删除它。为什么要到处写额外的代码？这不是额外的代码，只是一个额外的匿名函数。它并不是到处都是，它实际上都在一个地方，在脚本标签中。我不确定我们是否有相同的想法“很好地构建代码”。如果你将UI绑定到核心功能所在的“核心功能”，在我看来，这似乎是一种比仅将它们绑定到UI中更糟糕的耦合安排。我通常将所有UI绑定内容与核心内容分开，我感觉OP也可能…脚本必须在标记之后，否则执行时标记不存在——我建议更改您的答案以反映这一点。如何使用内联
onclick='myFunction（event）传播
事件
“
？”是的，我倾向于同意，我甚至提供了合理的“理由”，说明为什么这种内联代码的特殊使用在某些情况下是合理的。但现实情况是，当一个应用程序（web应用程序或其他应用程序）变得相当复杂时（这通常不需要花费太多时间或工作量），从可维护性的角度来看，在HTML布局中散布一些代码片段可能在体系结构上是不合理的。甚至开始直接编写JS代码
var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

function onclick(event) {
  alert(event)
}

function anonymous() {

}

<input type="text" id="fname" onkeyup="javascript:console.log(window.event.key)">


<input type="text" id="fname" onkeyup="javascript:{ console.log(window.event.key); alert('hello'); }">