第七章 异步编码

1  事件处理程序

处理程序:即网页加载完毕后将执行的代码,称回调函数或监听器;

包含:处理函数+window.onload=函数名;

 <script language="JavaScript" type="text/JavaScript">

 function page(){

 alert("I'm alive!");

 }

 window.onload=page;

 </script>

2 响应事件的方式编写代码

getElementByTagName返回NodeList对象,

表示DOM事件对象的属性:

target:存储触发事件的对象;

type:是字符串,如("click","load")指出发生的是哪种事件

timeStamp:提供事件发生时间属性;

keyCode:告诉用户刚刚按下那个键

clientX:确定鼠标/单击位置离浏览器窗口左边缘有多远;

clientY:确定鼠标/单击位置离浏览器窗口上边缘有多远;

screenX:确定鼠标/单击位置离屏幕窗口左边缘有多远;

screenY:确定鼠标/单击位置离屏幕窗口上边缘有多远;

pageX:确定鼠标/单击位置离网页窗口左边缘有多远;

pageY:确定鼠标/单击位置离网页窗口上边缘有多远;

touches:在触摸设备上确定用户用多少根手指触摸屏幕;

程序1 单击+计时

 <!doctype html>

 <html lang="en">

 <head>

 <title>Image Guess</title>

 <meta charset="utf-8">

 <style type="text/css">

 body{margin:20px;}

 img{margin:20px;}

 </style>

 <script language="JavaScript" type="text/JavaScript">

 window.onload=init;

 //初始捕捉事件

 function init(){

 var images=document.getElementsByTagName("img");

 for(var i=0;i<images.length;i++)

 images[i].onclick=showAnswer;

 }

 //处理单击事件

 function showAnswer(e){//单击产生一个事件对象被传递

 var image=e.target;//target指出触发事件的元素

 var name=image.id;

 name=name+".jpg";

 image.src=name;

 setTimeout(reblur, 2000, image);

 }

 //时间事件,2秒后变回模糊

 function reblur(image) {

 var name = image.id;

 name = name + "blur.jpg";

 image.src = name;

 }

 /*

 function init(){

 var image=document.getElementById("zero");

 image.onclick=showAnswer;

 }

 window.onload=init;

 function showAnswer(){

 var image=document.getElementById("zero");

 image.src="zero.jpg";

 }

 */

 //鼠标自动

 /*

 window.onload = function() {

 var images = document.getElementsByTagName("img");

 for (var i = 0; i < images.length; i++) {

 images[i].onmouseover = showAnswer;

 images[i].onmouseout = reblur;

 }

 };

 function showAnswer(eventObj) {

 var image = eventObj.target;

 var name = image.id;

 name = name + ".jpg";

 image.src = name;

 }

 function reblur(eventObj) {

 var image = eventObj.target;

 var name = image.id;

 name = name + "blur.jpg";

 image.src = name;

 }

 */

 </script>

 </head>

 <body>

 <img id="zero" src="zeroblur.jpg" />

 <img id="one" src="oneblur.jpg" />

 <img id="two" src="twoblur.jpg" />

 <img id="three" src="threeblur.jpg" />

 <img id="four" src="fourblur.jpg" />

 <img id="five" src="fiveblur.jpg" />

 </body>

 </html>

程序2 鼠标位置

 <!doctype html>

 <html lang="en">

 <head>

   <meta charset="utf-8">

   <title>Pirates Booty</title>

   <script>

 window.onload = init;

 function init() {

 var map = document.getElementById("map");

 map.onmousemove = showCoords;

 }

 function showCoords(eventObj) {

 var coords = document.getElementById("coords");

 var x = eventObj.clientX;//获取位置

 var y = eventObj.clientY;

 coords.innerHTML = "Map coordinates: " + x + ", " + y;//修改

 }

   </script>

 </head>

 <body>

 <img id="map" src="map.jpg">

 <p id="coords">Move mouse over map to find coordinates...</p>

 </body>

 </html>

3 事件群英谱

click:单击触发

load:加载完网页触发

unload:关闭或切换到其他网页触发

mousemove:在元素上移动鼠标触发

mouseover:鼠标移至元素上触发

mouseout:鼠标移开元素触发

keypress:按下任何键触发

resize:调整浏览器窗口大小触发

play:单击<video>元素播放按钮触发

pause:单击<video>元素暂停按钮触发

dragstart:用户拖曳网页元素时触发

drop:放下拖曳元素触发

touchstart:触摸设备,触摸并按住元素触发

touchend:停止触摸触发;

JavaScript学习笔记(六)—— 异步编码的更多相关文章

  1. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  2. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  3. JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  4. ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则

    ASP.NET MVC 学习笔记-7.自定义配置信息   ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...

  5. JavaScript:学习笔记(10)——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

  6. Javascript学习笔记三——操作DOM(二)

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  7. Spring Boot 学习笔记(六) 整合 RESTful 参数传递

    Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...

  8. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  9. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  10. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

随机推荐

  1. Hive学习之路 (十八)Hive的Shell操作

    一.Hive的命令行 1.Hive支持的一些命令 Command Description quit Use quit or exit to leave the interactive shell. s ...

  2. Hadoop学习之路(十)HDFS API的使用

    HDFS API的高级编程 HDFS的API就两个:FileSystem 和Configuration 1.文件的上传和下载 package com.ghgj.hdfs.api; import org ...

  3. ZOJ 4103 浙江省第16届大学生程序设计竞赛 D题 Traveler 构造

    这个题,正赛的时候也没有过,不过其实已经有了正确的解法,可惜时间不多了,就没有去尝试. 题意是有n个点,i点能通向i-1,然后i和i*2.i*2+1互通. 请你构造一种路径从1能走完所有点,并且不重复 ...

  4. ethereumjs/ethereumjs-common-2-API文档

    https://github.com/ethereumjs/ethereumjs-common/blob/master/docs/index.md 该API的调用的详细例子可见ethereumjs/e ...

  5. Apache AB的安装和使用(Ubuntu16.04)

    步骤很简单一共两步,安装一步,使用一步. sudo apt-get install apache2-utils ab -n 10000 -c 100 https://www.baidu.com/ 注意 ...

  6. django自带的登录验证功能

    django自带的验证机制 from django.shortcuts import render, redirect from django.contrib.auth import authenti ...

  7. Windows与Linux之间的文件自动同步

    问题:在工作中遇到一个场景,需要每天定时将Linux机器上的文件自动同步到Windows机器上. 解决方案有两个: 1.在Windows 机器上设置共享目录,然后在Linux机器上挂载共享 目录,每天 ...

  8. 从CMDB查询云平台组件或者IP简单脚本

    #!/bin/bash#author xiaoweige#todo: ip -- > ingredient or ingredient -- > ip #todo: get the ip ...

  9. Fiddler设置代理后,iphone手机无法访问网络的全面解决办法

    好久不抓手机包,都有些忘记了,电脑上软件都在,原本是Fiddler4,现在已自动升级到V5. 入主题吧,首先Fiddler设置好代理,然后手机安装证书好了,设置手机代理,结果iphone无法访问网络, ...

  10. React Webpack cookbook

    https://christianalfoni.github.io/react-webpack-cookbook/index.html https://fakefish.github.io/react ...