js-事件模型

时间 2020-01-09

原文原文链接

1. 回调函数html

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。浏览器

字面上的理解，回调函数就是一个参数，将这个函数做为参数传到另外一个函数里面，当那个函数执行完以后，再执行传进去的这个函数。这个过程就叫作回调。函数

其实也很好理解对吧，回调，回调，就是回头调用的意思。主函数的事先干完，回头再调用传进来的那个函数。可是之前看过不少博客，他们老是将回调函数解释的云里雾里，很高深的样子。spa

　　举一个别人举过的例子：约会结束后你送你女友回家，离别时，你确定会说：“到家了给我发条信息，我很担忧你。” 对不，而后你女友回家之后还真给你发了条信息。小伙子，你有戏了。其实这就是一个回调的过程。你留了个参数函数（要求女友给你发条信息）给你女友，而后你女友回家，回家的动做是主函数。她必须先回到家之后，主函数执行完了，再执行传进去的函数，而后你就收到一条信息了。.net

2. HTML onload 事件属性code

定义和用法

onload 属性在对象已加载时触发。htm

onload 经常使用在 <body> 中，一旦彻底加载全部内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。对象

<!DOCTYPE html>
<html>
<script>
function load()
{
alert("页面已加载！");
}
</script>
</head>

<body onload="load()">
<h1>Hello World!</h1>
</body>

</html>

3. onunload 事件blog

定义和用法

onunload 发生于当用户离开页面时发生的事件(经过点击一个链接，提交表单，关闭浏览器窗口等等。)事件

注意： onunload 事件一样触发了页面载入事件(+ onload 事件)。

4. DOM level 2 规范

除 IE 外大部分浏览器都遵照 DOM level 2 规范（实际上除了 IE 外其余浏览器都基本遵照 W3C 制订的各种规范），所以该套规范适用性最广。 DOM 2 规定了一个 addEventListener 方法用来绑定监听函数，该方法望文知意，直译过来就是「增长事件监听者」。该方法有三个参数(function addEventListener(event, fn, useCapture))： event 字符串类型的参数，表示要监听的事件，不用加 on fn 事件触发后执行的函数 useCapture 布尔型参数，按照何种事件流规范执行。为 true 时表示使用事件捕获，为 false 时表示使用事件冒泡，通常使用 false。

用addEventListener()给一个元素绑定多个事件？

人

5. Javascript 定时器

页面的一些动态效果都是经过定时器注册不一样的函数（这些函数改变着 HTML 和 CSS）来实现的。Javascript 提供了两个定时器函数，他们最小的定时单位都是毫秒：

（1）setTimeout 函数会注册一个回调函数并在若干毫秒后执行，只执行一次。该方法返回一个整型变量做为此次注册的 ID，fn 指要执行的函数（就是回调函数），能够是一个通常函数的函数名(字符串类型)，也能够是匿名函数。

setTimeout(function() {
	alert('你的小可爱忽然出现！');
}, 5000);

function notice() {
	alert('hi');
}

setTimeout (notice,1000);

（2）setInterval 函数会注册一个回调函数并在若干毫秒后执行，不一样的是他是每 x 毫秒执行一次，是周期性地循环执行的。该方法也返回一个整型变量，做为此次注册的 ID（该 ID 颇有用，由于注册的函数是循环执行的，若是想中止继续执行，须要清除此次注册，使用 clearInterval 函数）。 fn 指要执行的函数（就是回调函数），能够是一个通常函数的函数名(字符串类型)，也能够是匿名函数 time 整型参数，表示每 time 毫秒执行一次 fn 函数一下代码使用匿名函数实现了每 5 秒提示一个弹框：

setInterval (function() {
	alert('Five seconds have passed. What has Zhang Mengli learned?')
},5000);

在setInterval中注册的回调函数能够经过clearInterval来清除，清楚后将再也不被执行！

function clearInterval(id)

该参数是一个整型变量，指要清除的 ID，这个 ID 在 setInterval 函数中返回。

下面代码实现了先注册一个循环执行的函数，再清除它：

setInterval (function() {
	alert('Five seconds have passed. What has Zhang Mengli learned?')
},5000);
//代码执行到这里时注册了一个每 5 秒执行一次的函数，函数功能是弹出一个弹框。
//下面将清除这个弹框

clearInterval(id);//执行上述代码页面不会有任何反应。由于弹框第一次弹出是在代码执行后 5 秒，可是随即（代码顺序执行，刚注册完就清除先后可能不到 1 毫秒）被清除了，所以
没来得及弹一个框出来

HTML DOM clearInterval() 方法

定义和用法

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

实例

下面这个例子将每隔 50 毫秒调用 clock() 函数。您也可使用一个按钮来中止这个 clock：