javascript - 内联Javascript（在HTML中）如何工作？(How does inline Javascript (in HTML) work?)

Question

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.(当然，我们总会发现自己处于一个聪明的内联Javascript片段可以快速解决问题的情况。) 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.(从这里推断，似乎分配给属性onclick的字符串被插入到匿名函数中，该函数被分配给元素的单击处理程序。) 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!(内联JS是不好的做法！) 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.(它是如此容易得多，有时甚至还为具体涉及到这个HTML元素的代码感权元素中定义：当我决定2分钟后，这是一个可怕的，可怕的想法我可以攻击整个股利（或任何并且我没有在页面的其余部分悬挂一堆神秘的JS和CSS残骸，减慢了渲染速度。) This is similar to the concept of locality of reference but instead of cache misses we're looking at bugs and code bloat.(这类似于引用局部性的概念，但我们正在查看错误和代码膨胀，而不是缓存未命中。)   ask by Steven Lu translate from so

Answer 1

You've got it nearly correct, but you haven't accounted for the this value supplied to the inline code.(你已经几乎正确了，但你没有考虑提供给内联代码的this值。)

<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.(内联事件处理程序this设置为等于事件的目标。) You can also use anonymous function in inline script(您还可以在内联脚本中使用匿名函数) <a href="#" onclick="(function(){alert(this);})()">Click Me</a>