我知道这是不好的做法.如果可能的话,不要写这样的代码.
当然,我们总会发现自己处于一个聪明的内联Javascript片段可以快速解决问题的情况.
我正在追求这个问题,以便在完全理解发生这样的事情时会发生什么(以及潜在的陷阱):
<a href="#" onclick="alert('Hi')">Click Me</a>
Run Code Online (Sandbox Code Playgroud)
据我所知,这在功能上是相同的
<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>
Run Code Online (Sandbox Code Playgroud)
从这里推断,似乎分配给属性的字符串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! -->
Run Code Online (Sandbox Code Playgroud)
哪个有效.但我不知道这是多少黑客.它看起来很可疑,因为没有明显的功能正在返回!
你可能会问,为什么要这样做,史蒂夫?内联JS是不好的做法!
老实说,我已经厌倦了编辑三个不同的代码部分只是为了修改页面的一个部分,特别是当我只是原型化一些东西,看它是否会起作用.它是如此容易得多,有时甚至还为具体涉及到这个HTML元素的代码的含义来定义权范围内的元素:当我决定2分钟后,这是一个可怕的,可怕的想法我可以攻击整个股利(或任何并且我没有在页面的其余部分悬挂一堆神秘的JS和CSS残骸,减慢了渲染速度.这类似于引用局部性的概念,但我们正在查看错误和代码膨胀,而不是缓存未命中.
我有以下功能
function hello() {
alert("hi!");
}
Run Code Online (Sandbox Code Playgroud)
拿这段代码:
var elem = document.getElementById("btn");
elem.onclick = hello;
Run Code Online (Sandbox Code Playgroud)
我的问题可能有点难以理解,所以请耐心看看:这段代码与普通调用有什么区别,或者是什么使得这段代码需要引用函数变量而不是常规调用?(hello();)
我怎么知道我应该在哪里提供函数的引用,以及什么时候我应该实际调用它?