DOM笔记(五):JavaScript的常见事件和Ajax小结
一、常见事件类型
1、鼠标事件
| 事件名称 | 说明 |
| onclick | 鼠标单击时触发 |
| ondbclick | 鼠标双击时触发 |
| onmousedown | 鼠标左键按下时触发 |
| onmouseup | 鼠标释放时触发 |
| onmouseover | 鼠标的光标移动到某对象上时触发 |
| onmousemove | 鼠标移动时触发 |
| onmouseout | 鼠标光标离开某对象时触发 |
ps: 当单击一次鼠标左键的时候,将同时触发onclick、onmousedown、onmouseup三个事件,事件处理程序执行的先后顺序 为:onmousedown>onmouseup>onclick.因为按下鼠标产生的动作肯定是在释放鼠标之前的,而一次按下加上一次释 放,才代表一次单击,所以onclick最后执行。
2、键盘事件
| 事件名称 | 说明 |
| onkeypress | 某个键按下以后触发 |
| onkeydown | 某个键按下时触发 |
| onkeyup | 某个键被释放时触发 |
ps:对键盘的操作也会同时触发这三个事件,其处理程序执行的先后顺序是onkeydown>onkeypress>onkeyup.原因参见鼠标事件。
3、页面事件
| 事件名称 | 说明 |
| onerror | 页面出错时触发 |
| onload | 页面加载完成时触发 |
| onresize | 浏览器窗口大小该表时触发 |
| onscroll | 浏览器滚动条的位置发生变化时触发 |
| onunload | 页面将被卸载时触发 |
4、表单事件
| 事件名称 | 说明 |
| onblur | 元素失去焦点时触发 |
| onchange | 元素失去焦点并且元素内容改变时触发 |
| onfocus | 元素获得焦点时触发 |
| onsubmit | 表单被提交时触发 |
二、JavaScript Ajax小结
1.创建XHR对象
| 方法 | 说明 |
| new ActiveXObject(“Microsoft.XMLHTTP”) | 适用于i支持window.ActiveXObject的ie5和ie6等 |
| new XMLHttpRequest() | 适用于ie7+/ff/chrome/safari/opera等 |
2、XHR对象的属性和方法
| 属性或方法 | 说明 |
| readyState | 通信状态,取值0~4,见后文 |
| onreadystatechange | readyState改变时触发此事件 |
| responseText | 服务器返回的文本格式文档 |
| responseXML | 服务器返回的XML格式文档 |
| status | 状态码,如100,200,404,500等 |
| statusText | 状态码对应的文本(OK/Not Found) |
| abort() | 中止当前请求 |
| open(method,url) | 打开一个请求 |
| send(args) | 发送请求 |
| setRequestHeader(key,value) | 设置请求的头部 |
| getResponseHeader(key) | 获取响应的头部值 |
| getAllResponseHeaders() | 以键值对形式返回所有头部信息 |
3、readyState属性
| 代码 | 说明 |
| 0 | 代表一个未初始化的状态。以创建未初始化的XHR对象 |
| 1 | 代表连接状态。已经调用了open方法,准备发送请求 |
| 2 | 代表发送状态。已经调用了send方法,尚未得到响应数据 |
| 3 | 代表正在接收状态,已经接收了HTTP响应的头部信息,正在接收响应内容 |
| 4 | 代表已经加载状态,此时响应内容已经被完全接收 |
DOM笔记(五):JavaScript的常见事件和Ajax小结的更多相关文章
- JavaScript的常见事件和Ajax小结
一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...
- .Net 转战 Android 4.4 日常笔记(8)--常见事件响应及实现方式
在Andrioid开发中,常见的事件如下 单击事件 OnClickListener 长按事件 OnLongClickListener 滑动事件 OnTouchListenner 键盘事件 OnKeyL ...
- C#线程学习笔记五:线程同步--事件构造
本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/23/Event_Constructor.html,记录一下学习过程以备后续查用. 前面讲的线 ...
- 学习笔记:javascript body常用事件
Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbefor ...
- DOM笔记(四):HTML 5 DOM复杂数据类型
HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStri ...
- DOM笔记(十):JavaScript正则表达式
一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...
- DOM笔记(十):JavaScript正則表達式
一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...
- DOM笔记(十三):JavaScript的继承方式
在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...
- 【MarkMark学习笔记学习笔记】javascript/js 学习笔记
1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...
随机推荐
- Docker基础技术:Linux CGroup
前面,我们介绍了Linux Namespace,但是Namespace解决的问题主要是环境隔离的问题,这只是虚拟化中最最基础的一步,我们还需要解决对计算机资源使用上的隔离.也就是说,虽然你通过Name ...
- C# 数组、一维数组、二维数组、多维数组、锯齿数组
C# 数组.一维数组.二维数组.多维数组.锯齿数组 一.数组: 如果需要使用同一类型的对象,就可以使用数组,数组是一种数据结构,它可以包含同一类型的多个元素.它的长度是固定的,如长度未知的情况下,请 ...
- c# 计算1-100之间的所有整数的和
求1-100所有整数和: class Program { static void Main(string[] args) { ,); Console.WriteLine("1-100之间所有 ...
- code manager tools TotoiseSVN安装及使用
TotoiseSVN安装及使用 TotoiseSVN官方下载地址:http://tortoisesvn.net/downloads.html TotoiseSVN安装:很简单,一路直下:就不在这说了, ...
- Debugging JTAG Connectivity Problems
2013-12-04 22:34:26 转自:http://processors.wiki.ti.com/index.php/Debugging_JTAG_Connectivity_Problems ...
- 《c程序设计语言》读书笔记--统计 行数、单词数、字符数
#include <stdio.h> int main() { int lin = 0,wor = 0,cha = 0; int flag = 0; int c; while((c = g ...
- 汉字编码:GB2312, GBK, GB18030, Big5
前一篇博文:ANSI是什么编码?中有这样一段小故事: 话说计算机是由美国佬搞出来的嘛,他们觉得一个字节(可以表示256个编码)表示英语世界里所有的字母.数字和常用特殊符号已经绰绰有余了(其实ASCII ...
- Python3 学习第十弹: 模块学习三之数字处理
math模块 提供基础的数学函数, cos(3.14) = -0.999..(弧度制) acos(1) = 0.0 sqrt(9) = 3.0 degrees(3.14) = 179.9999..(弧 ...
- laravel中的$request对象构造及请求生命周期
laravel应用程序中index.php是所有请求的入口.当用户提交一个form或者访问一个网页时,首先由kernel捕捉到该session PHP运行环境下的用户数据, 生成一个request对象 ...
- WEBUS2.0 In Action - 搜索操作指南 - (1)
上一篇:WEBUS2.0 In Action - 索引操作指南(2) | 下一篇:WEBUS2.0 In Action - 搜索操作指南(2) 1. IQueriable中内置的搜索功能 在Webus ...