事件驱动模型
视频锁定
{$ currentTime | date:'mm:ss' $}
{$ timeLeft | date:'mm:ss' $}
由于客户端 JavaScript 的开发属于用户界面开发的范畴,因此使用事件驱动模型就显 得非常自然了,事件驱动的特点在于:代码块的运行与否与程序流程无关。而传统的流式代 码的特点是,从函数的入口进入,依次调用各个子模块的处理函数,最后退出。这种编程模 式主要适用于与 UI 关系不大的场合,很少有异步的过程,这些特点可能要追溯到计算机程 序的最初模型:批处理。
而事件驱动模型主要是面向用户的,你在实现无法知道用户会如何使用你的程序,因此就只能通过回调,事件监听等方式,当用户做出某个动作时才会触发之前已经注册好的监听 器,从而执行相关代码,而不是顺序的执行。甚至在一次运行中,部分代码始终没有被触发, 也就根本不会被执行到。
比如在页面中,我们为按钮的点击事件注册了事件监听器,当点击的时候弹出一个对话框,但是用户打开页面后,浏览完内容后就直接关闭了,没有点击按钮,那么相关的代码就没有被触发,我们来看一个简单的示例:
我们有一个页面,内容如下:
<html>
<head>
<style>
body{
margin: 20px;
font-family : "Verdana";
font-size : normal;
background-color :#ee;
}
</style>
</head>
<body onload="init()">
<p>
<label for="toclick">Please click the button:</label>
<input id="toclick" type="button" value="Click me" />
</p>
</body>
</html>
图 页面 click-me 的展示
可以看到 body 标签的 onload 属性被赋予一个值”init()”,这是一个对 JavaScript 代码的调用,时机发生在当页面加载完成之后,也就是浏览器已经创建了所有 body 中的 DOM 对象之后。
我们来看看这个 init 函数的内容:
<script type="text/javascript" language="javascript">
function init(){
var button = document.getElementById('toclick');
button.onclick = function(){
alert('button is clicked');
}
}
</script>
这段代码先从 document 中获取 id 为”toclick”的元素(也就是我们刚才在 html 中声明的 button),然后为其 click 事件绑定一个函数,当 click 事件被触发时,弹出一个警告框。
图 警告框效果
在线练习
{$ activeFileHint $}