内联Javascript（以HTML格式）如何工作？

我知道这是不好的做法。尽可能不要编写这样的代码。

当然，我们总是会发现自己的内联Javascript代码段可以快速解决问题。

我追求此查询的目的是充分了解编写类似以下内容时会发生什么（以及潜在的陷阱）：

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

据我所知，这在功能上与

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

由此推断，似乎已将分配给属性的字符串onclick插入到一个匿名函数中，该匿名函数已分配给元素的单击处理程序。确实是这样吗？

因为我开始做这样的事情：

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! --> 

哪个有效。但是我不知道这是多少黑客。它看起来很可疑，因为没有明显的函数要从中返回！

您可能会问，为什么要这样做，史蒂夫？内联JS是不好的做法！

老实说，我只是为了修改页面的一个部分而厌倦了编辑代码的三个不同部分，尤其是当我只是对某个东西进行原型设计以查看它是否可以工作时。在此元素内定义与此HTML元素特别相关的代码非常容易，有时甚至很有意义：当我在两分钟后决定这是一个可怕的想法时，我可以对整个div进行核对（或其他任何方法） ），并且在页面的其余部分中没有一堆神秘的JS和CSS碎片，从而使渲染速度稍有降低。这类似于引用局部性的概念，但我们要关注的是错误和代码膨胀，而不是缓存未命中。

您已经接近正确，但尚未考虑this提供给内联代码的值。

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

实际上更接近：

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

内联事件处理程序设置为this等于事件的目标。您还可以在内联脚本中使用匿名函数

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

浏览器完成后会做什么

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

是将“ onclick”的实际值有效地设置为：

new Function("event", "alert('Hi');");

也就是说，它创建了一个期望“事件”参数的函数。（嗯，IE不会；它更像是一个简单的简单匿名函数。）

事件处理程序属性似乎引发了许多不良做法。错误的做法是不知道并在最合适的地方使用可用的功能。事件属性完全是W3C记录的标准，并且没有不好的做法。这与放置内联样式没有什么不同，内联样式也是W3C记录的，并且有时会很有用。无论您是否将其包装在脚本标签中，都将以相同的方式进行解释。

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

回答问题的最佳方法是查看问题。

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

在js中

var test = document.getElementById('test');
console.log( test.onclick ); 

如在中所见console，如果您使用的是chrome，则它会打印带有传入事件对象的匿名函数，尽管在IE中有所不同。

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

我同意您关于内联事件处理程序的一些观点。是的，它们很容易编写，但我不同意您必须在多个位置更改代码的观点，如果您可以很好地构建代码结构，则无需这样做。

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

这是一个匿名函数，已附加到对象的click事件。

你为什么要这么做，史蒂夫？

你到底为什么做土.....啊，没关系，正如你已经提到的那样，它确实是被广泛采用的坏习惯:)

在控制台中尝试：

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

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

div.onclick

在Chrome中，它显示如下：

function onclick(event) {
  alert(event)
}

...和非标准name的财产div.onclick就是"onclick"。

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

function anonymous() {

}