一、常见事件类型

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小结的更多相关文章

  1. JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  2. .Net 转战 Android 4.4 日常笔记(8)--常见事件响应及实现方式

    在Andrioid开发中,常见的事件如下 单击事件 OnClickListener 长按事件 OnLongClickListener 滑动事件 OnTouchListenner 键盘事件 OnKeyL ...

  3. C#线程学习笔记五:线程同步--事件构造

    本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/23/Event_Constructor.html,记录一下学习过程以备后续查用. 前面讲的线 ...

  4. 学习笔记:javascript body常用事件

    Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbefor ...

  5. DOM笔记(四):HTML 5 DOM复杂数据类型

    HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStri ...

  6. DOM笔记(十):JavaScript正则表达式

    一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...

  7. DOM笔记(十):JavaScript正則表達式

    一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...

  8. DOM笔记(十三):JavaScript的继承方式

    在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...

  9. 【MarkMark学习笔记学习笔记】javascript/js 学习笔记

    1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...

随机推荐

  1. Docker基础技术:Linux CGroup

    前面,我们介绍了Linux Namespace,但是Namespace解决的问题主要是环境隔离的问题,这只是虚拟化中最最基础的一步,我们还需要解决对计算机资源使用上的隔离.也就是说,虽然你通过Name ...

  2. C# 数组、一维数组、二维数组、多维数组、锯齿数组

    C#  数组.一维数组.二维数组.多维数组.锯齿数组 一.数组: 如果需要使用同一类型的对象,就可以使用数组,数组是一种数据结构,它可以包含同一类型的多个元素.它的长度是固定的,如长度未知的情况下,请 ...

  3. c# 计算1-100之间的所有整数的和

    求1-100所有整数和: class Program { static void Main(string[] args) { ,); Console.WriteLine("1-100之间所有 ...

  4. code manager tools TotoiseSVN安装及使用

    TotoiseSVN安装及使用 TotoiseSVN官方下载地址:http://tortoisesvn.net/downloads.html TotoiseSVN安装:很简单,一路直下:就不在这说了, ...

  5. Debugging JTAG Connectivity Problems

    2013-12-04 22:34:26 转自:http://processors.wiki.ti.com/index.php/Debugging_JTAG_Connectivity_Problems ...

  6. 《c程序设计语言》读书笔记--统计 行数、单词数、字符数

    #include <stdio.h> int main() { int lin = 0,wor = 0,cha = 0; int flag = 0; int c; while((c = g ...

  7. 汉字编码:GB2312, GBK, GB18030, Big5

    前一篇博文:ANSI是什么编码?中有这样一段小故事: 话说计算机是由美国佬搞出来的嘛,他们觉得一个字节(可以表示256个编码)表示英语世界里所有的字母.数字和常用特殊符号已经绰绰有余了(其实ASCII ...

  8. Python3 学习第十弹: 模块学习三之数字处理

    math模块 提供基础的数学函数, cos(3.14) = -0.999..(弧度制) acos(1) = 0.0 sqrt(9) = 3.0 degrees(3.14) = 179.9999..(弧 ...

  9. laravel中的$request对象构造及请求生命周期

    laravel应用程序中index.php是所有请求的入口.当用户提交一个form或者访问一个网页时,首先由kernel捕捉到该session PHP运行环境下的用户数据, 生成一个request对象 ...

  10. WEBUS2.0 In Action - 搜索操作指南 - (1)

    上一篇:WEBUS2.0 In Action - 索引操作指南(2) | 下一篇:WEBUS2.0 In Action - 搜索操作指南(2) 1. IQueriable中内置的搜索功能 在Webus ...