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

javascript html

2022-08-30 04:18:04

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

当然，我们总会发现自己处于这样一种情况，即内联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碎片挂在页面的其余部分，渲染速度会稍微减慢。这类似于引用局部性的概念，但我们看到的不是缓存未命中，而是 bug 和代码膨胀。

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

答案 2

当您获得浏览器时，浏览器会做什么

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

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

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

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