JavaScript学习笔记(六)—— 异步编码
第七章 异步编码
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学习笔记(六)—— 异步编码的更多相关文章
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
- JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
- 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 ...
- JavaScript:学习笔记(10)——XMLHttpRequest对象
JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...
- Javascript学习笔记三——操作DOM(二)
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- Spring Boot 学习笔记(六) 整合 RESTful 参数传递
Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
随机推荐
- Hive学习之路 (十八)Hive的Shell操作
一.Hive的命令行 1.Hive支持的一些命令 Command Description quit Use quit or exit to leave the interactive shell. s ...
- Hadoop学习之路(十)HDFS API的使用
HDFS API的高级编程 HDFS的API就两个:FileSystem 和Configuration 1.文件的上传和下载 package com.ghgj.hdfs.api; import org ...
- ZOJ 4103 浙江省第16届大学生程序设计竞赛 D题 Traveler 构造
这个题,正赛的时候也没有过,不过其实已经有了正确的解法,可惜时间不多了,就没有去尝试. 题意是有n个点,i点能通向i-1,然后i和i*2.i*2+1互通. 请你构造一种路径从1能走完所有点,并且不重复 ...
- ethereumjs/ethereumjs-common-2-API文档
https://github.com/ethereumjs/ethereumjs-common/blob/master/docs/index.md 该API的调用的详细例子可见ethereumjs/e ...
- Apache AB的安装和使用(Ubuntu16.04)
步骤很简单一共两步,安装一步,使用一步. sudo apt-get install apache2-utils ab -n 10000 -c 100 https://www.baidu.com/ 注意 ...
- django自带的登录验证功能
django自带的验证机制 from django.shortcuts import render, redirect from django.contrib.auth import authenti ...
- Windows与Linux之间的文件自动同步
问题:在工作中遇到一个场景,需要每天定时将Linux机器上的文件自动同步到Windows机器上. 解决方案有两个: 1.在Windows 机器上设置共享目录,然后在Linux机器上挂载共享 目录,每天 ...
- 从CMDB查询云平台组件或者IP简单脚本
#!/bin/bash#author xiaoweige#todo: ip -- > ingredient or ingredient -- > ip #todo: get the ip ...
- Fiddler设置代理后,iphone手机无法访问网络的全面解决办法
好久不抓手机包,都有些忘记了,电脑上软件都在,原本是Fiddler4,现在已自动升级到V5. 入主题吧,首先Fiddler设置好代理,然后手机安装证书好了,设置手机代理,结果iphone无法访问网络, ...
- React Webpack cookbook
https://christianalfoni.github.io/react-webpack-cookbook/index.html https://fakefish.github.io/react ...