首先我们先来看看下面的三个例子,然后我们将这三个例子进行比较(看仔细哦!)
<!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 事件属性,然后完成对函数的调用,这样就好理解二和三这么写原因了。
以上纯属个人理解,如果有什么错误的地方,请指出,将万分感激