使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:

这是什么意思呢?我们先看一段HTML代码:

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

这段代码很简单,就是在点击button时调用displayDate()函数,因为我学习的还不深入,但是以我面向对象基础感觉,这样没有很好封装的感觉,应该声明好该有的控件,然后在javascript部分来定义这些控件在某些事件产生时该执行什么动作,

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

虽然很简单,但是作为初学,还是记录一下。

 

posted @ 2014-03-10 16:13  hansonzhe  阅读(578)  评论(0编辑  收藏  举报