JavaScript 第九章总结
Handing events
前言
这一章节主要讲了关于 events 的内容,讲了 event 的定义,以及如何用 code 来 react to events。同时,也说明了 JavaScript 中利用 event 编码的特点:它是 asynchronous 的,而不是 linear 的。
谈谈event
定义:Browser 不仅仅 retrieve & display 你的 page, 也不仅仅会 building 这个 page 的 DOM, 而且还会记录一系列的 events,比如一次点击,一次缩放等等...
在这一章讲了三种类型的 event:
- DOM events:比如 click,keypress 等等
- timer events
- network-based events
谈谈 event handler
event handler 的定义:
在 code 的方面,event handler 就是 一个 function,当特定的 event 发生的时候,就会 call 这个 function.
如何使用event handle
- 写一个函数:function pageLoadedHandler(){}
- 然后设置一个 callback 的 event:wind.onload = pageLoadHandler;
DOM event 的 handle 方法
步骤:
- 创建一个 DOM 对象
- assign 一个 handler 在它的一个 event 上。
- 完善 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.
其他
- 当 setInterval 的时候,会创建一个 timer object,可以将它传给 clearInterval 来终止 timer.
- setTimeout 实际上是一个 method, 完整的形式为 window.setTimeout.
- 可以为 setTimeout 中设置第三个 argument 为 handler 需要的 argument.
- 这样做的原因是: 没有特定地发生 DOM event. 因此可以先利用 eventObj.target 获得对象,然后把这个对象作为一个 argument 传给 setTimeout.
JavaScript 第九章总结的更多相关文章
- 为什么我要放弃javaScript数据结构与算法(第九章)—— 图
本章中,将学习另外一种非线性数据结构--图.这是学习的最后一种数据结构,后面将学习排序和搜索算法. 第九章 图 图的相关术语 图是网络结构的抽象模型.图是一组由边连接的节点(或顶点).学习图是重要的, ...
- JavaScript DOM编程艺术-学习笔记(第八章、第九章)
第八章 1.小知识点: ①某些浏览器要根据DOCTYPE 来决定页面的呈现模式(标准模式 / 怪异模式--也称兼容模式): 兼容模式意味着浏览器要模仿老一辈的浏览器的怪异行为,来让老站点得到运行,并让 ...
- JavaScript高级程序设计:第九章
第九章 一.使用能力检测 能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力.能力检测的基本模式如下: if ( object.propertyInQuestion ) { //使用object ...
- 精通Web Analytics 2.0 (11) 第九章: 新兴分析—社交,移动和视频
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第九章: 新兴分析-社交,移动和视频 网络在过去几年中发生了不可思议的发展变化:从单向对话到双向对话的转变; 由视频,Ajax和 ...
- Knockout应用开发指南 第九章:高级应用举例
原文:Knockout应用开发指南 第九章:高级应用举例 1 Contacts editor 这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的 ...
- jQuery第九章
第九章 jQuery Mobile 一.HTML5.0简介 谈到Web设计,我们经常把Web分为三个层: (1)结构层:(2)表现层:(3)行为层. 对应的技术分别是: (1)HTML:(2)CSS: ...
- 《Django By Example》第九章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag 注:哈哈哈,第九章终于来啦 ...
- 第九章 基于HTTP的功能追加协议
第九章 基于HTTP的功能追加协议 通过在HTTP的基础上添加新的功能来提高性能和功能. 一.消除HTTP瓶颈的SPDY SPDY(SPeeDY)目的是提高HTTP性能,缩短Web页面的加载时间(50 ...
- 第九章:四大组件之Broadcast Receiver
第九章:四大组件之Broadcast Receiver 一.广播的功能和特征 广播的生命周期很短,经过调用对象-->实现onReceive-->结束,整个过程就结束了.从实现的复杂度和 ...
随机推荐
- C#实现根据地图上的两点坐标,计算直线距离
根据地图上的两点坐标,计算直线距离,在网上找到javascript的写法,用C#实现一下 /// <summary> /// 根据地图上的两点坐标,计算直线距离 /// </summ ...
- linux下网卡bonding配置(转)
linux下网卡bonding配置 章节 bonding技术 centos7配置bonding centos6配置bonding 一.bonding技术 bonding(绑定)是一种linux系统 ...
- 【Python046--魔法方法:描述符】
一.描述符的定义: 描述符就是将特殊类型的类的实例指派给另外一个类的属性 1.举例: 特殊类型的类要实现以下三个方法中的其中一个或者全部实现 * __get__(self,instance,owner ...
- Python3基础 dict 创建字典 空字典
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- C# Math类简介运用
总结了一下几个常用的Math类 /* ######### ############ ############# ## ########### ### ###### ##### ### ####### ...
- 怎么删除git本地分支以及Bitbucket的远程分支?
1. 如果分支只是本地分支,则可以使用 -d (如果分支已合并),例如 git branch -d <branch name>如果分支包含不计划合并的代码,请改用 -D (即使有没有mer ...
- 如何合并ts文件?
答: 使用ffmpeg工具,使用方法如下: ffmpeg -i <m3u8 file name> <output file name> 注意:要先将m3u8文件中描述的ts文件 ...
- 通过cmd调用Powershell脚本
一共需要3个文件,把这3个文件放在一个路径下 UTF8NoBOM.bat 这个文件是为了调用ps1 pwsh -file "%cd%\UTF8NoBOM.ps1" UTF8No ...
- JavaI/O(输入/输出)
File类 通过File类可以在程序中操作文件和目录,File能新建.删除.重命名文件和目录,但是不能访问文件内容本身. 理解I/O流 流(stream)是从起源(source)到接收(sink)的有 ...
- [bootstrapValidator] - bootstrap的验证工具
翻了下之前和同事做的一个验证 <!--bootstrapValidator--> <script type="text/javascript" th:inline ...