JavaScript 第九章总结

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

Handing events

前言

这一章节主要讲了关于 events 的内容，讲了 event 的定义，以及如何用 code 来 react to events。同时，也说明了 JavaScript 中利用 event 编码的特点：它是 asynchronous 的，而不是 linear 的。

谈谈event

定义：Browser 不仅仅 retrieve & display 你的 page, 也不仅仅会 building 这个 page 的 DOM, 而且还会记录一系列的 events,比如一次点击，一次缩放等等...
在这一章讲了三种类型的 event：

1. DOM events:比如 click,keypress 等等
2. timer events
3. network-based events

谈谈 event handler

event handler 的定义：

在 code 的方面，event handler 就是 一个 function,当特定的 event 发生的时候，就会 call 这个 function.

如何使用event handle

1. 写一个函数：function pageLoadedHandler(){}
2. 然后设置一个 callback 的 event：wind.onload = pageLoadHandler;

DOM event 的 handle 方法

步骤：

1. 创建一个 DOM 对象
2. assign 一个 handler 在它的一个 event 上。
3. 完善 handler 的函数

注意事项

1, 在 DOM 被创建之后，page 中的 element 才能被 JavaScript 中使用，所以每次都需要调用 onload，然后在调用在函数里创建 HTMl 中的 element 对象。
格式：
window.onload = init;
function init() {
var name = document.getElementById("idOfElement")
2, 一个 image 对象具有 src，id 这些 property可以使用，格式为 ：image.src = "zero.jpg";
3, eventObj:当多个对象的 handler 的模式一样的时候，可以利用 event object 中的 target 这个 property 来 reuse the handler, 其他的 properties 有 type, timeStamp, keyCode, clientX, clientY等等。
4, getElementByTagName() :可以返回一个 list,类型为 Nodelist 的 Object，可以使用 for() 循环和 getElementByTagName("img") 来为每一个 DOM element 匹配相同的 handler,

书中介绍的一些 events

通过 assign a handler to a property 的方式

• window.onload：在界面 load 完全之后进行 call back
• window.onresize: 在浏览器界面改变尺寸的时候进行 call back.
• object.onclick: 在 user 鼠标点击的时候 call back
• object.onmousemove:在 user 鼠标移动的时候进行 call back.
  * object.onmousseover: 在 user 鼠标移过的时候进行 call back

通过 call function 的方式：setTimeout，setInterval

语法：

首先定义一个 handler，然后使用 setTimeout(x,y),其中 x 为 handler, y为进行的时间，单位为毫秒,当到达时间就会 invoke 这个 tied 的 handler
setInterval(x,y),格式与 setTImeout(x,y) 相同，是每隔 y 毫秒就会 invoke 对应的 handler.

其他

1. 当 setInterval 的时候，会创建一个 timer object,可以将它传给 clearInterval 来终止 timer.
2. setTimeout 实际上是一个 method, 完整的形式为 window.setTimeout.
3. 可以为 setTimeout 中设置第三个 argument 为 handler 需要的 argument.
4. 这样做的原因是： 没有特定地发生 DOM event. 因此可以先利用 eventObj.target 获得对象，然后把这个对象作为一个 argument 传给 setTimeout.