首先我们先来看看下面的三个例子，然后我们将这三个例子进行比较（看仔细哦！）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
<!
DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
菜鸟教程(runoob.com)
</
title
>
</
head
>
<
head
>
</
head
>
<
body
>
<
p
>
点击按钮执行
<
em
>
displayDate()
</
em
>
函数.
</
p
>
<
button
id
=
"myBtn"
>
点这里
</
button
>
<
script
>
document
.
getElementById
(
"myBtn"
).
onclick
=
function
() {
displayDate
()};
function
displayDate
() {
document
.
getElementById
(
"demo"
).
innerHTML
=
Date
();
}
<
/
script
>
<
p
id
=
"demo"
></
p
>
</
body
>
</
html
>
<!
DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
菜鸟教程(runoob.com)
</
title
>
</
head
>
<
head
>
</
head
>
<
body
>
<
p
>
点击按钮执行
<
em
>
displayDate()
</
em
>
函数.
</
p
>
<
button
id
=
"myBtn"
>
点这里
</
button
>
<
script
>
var
x
=
function
displayDate
() {
document
.
getElementById
(
"demo"
).
innerHTML
=
Date
();
}
document
.
getElementById
(
"myBtn"
).
onclick
=
x
;
<
/
script
>
<
p
id
=
"demo"
></
p
>
</
body
>
</
html
>
相似点：以上代码都可实现同样的功能。
解析：相信认真看过代码的朋友，都能找出三者的不同点。第二个和第三个的区别就是，第二个在 displayDate() 函数外嵌套了一层匿名函数，第三个把 displayDate() 的函数名赋给了变量 x（重点：可以理解为把 displayDate() 函数的 指针(引用) 传给了 x） ，然后再将 x 赋给了document.getElementById ("myBtn").onclick 事件属性，然后通过点击事件触发 onclick 指向的 displayDate() 函数，就 实现了相同的功能。
细节：你们可以把第一个中 onclick 事件属性机制了解下。
我的理解：onclick 事件属性底层代码是这么实现的，先将赋给 onclick 事件属性的值（字符串"displayDate()"）转换成函数，再将函数的指针(引用)传给 onclick 事件属性，然后完成对函数的调用，这样就好理解二和三这么写原因了。
以上纯属个人理解，如果有什么错误的地方，请指出，将万分感激