内联Javascript（HTML）如何工作？ [英] How does inline Javascript (in HTML) work?

问题描述

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

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

为了充分理解发生的事情（和潜在的陷阱），我正在追求这个查询：

 < a href =＃onclick =alert（'Hi'）>点击我< / a> 
  

据我所知，这在功能上与

相同

 < script type =text / javascript> 
 $（function（）{//我在这个例子中使用jQuery 
 document.getElementById（'click_me'）。onclick = 
 function（）{alert（'Hi'）;}; 
}）; 
< / script> 
< a href =＃id =click_me>点击我< / a> 
  

从这个外推看来，分配给属性的字符串onclick 插入到分配给元素的点击处理程序的匿名函数中。这是真的吗？

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

  < a href =＃onclick =$（this）.next（）。fadeIn（）; return false;>显示我的下一个兄弟< / a> <！ - 在处理程序中返回false以免滚动到页面顶部！ - > 
  

其中有效。但我不知道这是多少破解。它看起来很可疑，因为没有明显的功能被返回！

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

好吧，说实话，我已经厌倦了编辑三段不同的代码，只是为了修改页面的一部分，特别是当我只是做一些原型如果它可以工作的话。它非常容易，有时甚至是有意义的，因为与这个HTML元素特别相关的代码在元素中定义：当我2分钟后决定这是一个可怕的，可怕的想法时，我可以nuke整个div（或其他），我没有在页面的其余部分悬挂一堆神秘的JS和CSS cruft，减慢渲染的速度。这与引用的局部性的概念相似，但是我们正在查看错误和代码膨胀，而不是缓存未命中。

解决方案

你已经知道它几乎是正确的，但是你没有考虑到 this



 < a href =＃onclick =alert（this code> value to provide inline code。
 ）>点击我< / a> 
  

实际上更接近：



 < a href =＃id =click_me>点击我< / a> 
< script type =text / javascript> 
 document.getElementById（'click_me'）。addEventListener（click，function（event）{
（function（event）{
 alert（this）; 
}）。调用（document.getElementById（'click_me'），event）; 
}）; 
< / script> 
  

内联事件处理程序将这个等于事件的目标。
您也可以在内嵌脚本中使用匿名函数

 < a href =＃onclick = （）{alert（this）;}）（）>点击我< / a> 
  




I know this is bad practice. Don't write code like this if at all possible.

Of course, we'll always find ourselves in situations where a clever snippet of inline Javascript can address an issue quickly.

I am pursuing this query in the interest of fully understanding what happens (and the potential pitfalls) when something like this is written:

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

As far as I can tell this is functionally the same as

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

Extrapolating from this it seems that the string assigned to attribute onclick is inserted within an anonymous function which is assigned to the element's click handler. Is this actually the case?

Because I'm starting to do things like this:

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

Which works. But I don't know how much of a hack this is. It looks suspicious because there is no apparent function that is being returned from!

You might ask, why are you doing this, Steve? Inline JS is bad practice!

Well to be quite honest I'm tired of editing three different sections of code just to modify one section of a page, especially when I'm just prototyping something to see if it will work at all. It is so much easier and sometimes even makes sense for the code specifically related to this HTML element to be defined right within the element: When I decide 2 minutes later that this was a terrible, terrible idea I can nuke the entire div (or whatever) and I don't have a bunch of mysterious JS and CSS cruft hanging around in the rest of the page, slowing down rendering ever so slightly. This is similar to the concept of locality of reference but instead of cache misses we're looking at bugs and code bloat.

解决方案

You've got it nearly correct, but you haven't accounted for the this value supplied to the inline code.

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

is actually closer to:

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

Inline event handlers set this equal to the target of the event. You can also use anonymous function in inline script

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

这篇关于内联Javascript（HTML）如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！