内联 Javascript（HTML 中）如何工作？

Question

我知道这是不好的做法。如果可能的话，不要编写这样的代码。

当然，我们总是会发现自己处于这样的情况：巧妙的内联 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 元素专门相关的代码来说，要容易得多，有时甚至是有意义的：当我在 2 分钟后决定这是一个非常非常糟糕的想法时，我可以破坏整个 div (或其他什么），而且我没有在页面的其余部分中悬挂一堆神秘的 JS 和 CSS 垃圾，从而稍微减慢渲染速度。这类似于引用局部性的概念，但我们关注的是错误和代码膨胀，而不是缓存未命中。

Answer 1

您的计算几乎是正确的，但您没有考虑提供给内联代码的

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>

Answer 2

当你获得后浏览器会做什么

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

是将“onclick”的实际值设置为有效的值，例如：

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

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

Answer 3

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

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

Answer 4

看到

它的实际应用。 <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')
}

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

Answer 5

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

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

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

你到底为什么这样做......啊没关系，正如你所提到的，这确实是广泛采用的不良做法:)

Answer 6

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() {

}

Answer 7

javascript：

这里使用了输入元素

<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'); }">

Answer 8