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 代表已经加载状态,此时响应内容已经被完全接收

原文首发:http://www.ido321.com/1327.html

下一篇:DOM笔记(六):怎么进行JQuery扩展?

时间: 2024-11-05 06:07:09

DOM笔记(五):JavaScript的常见事件和Ajax小结的相关文章

JavaScript的常见事件和Ajax小结

一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 onmouseover 鼠标的光标移动到某对象上时触发 onmousemove 鼠标移动时触发 onmouseout 鼠标光标离开某对象时触发 ps:当单击一次鼠标左键的时候,将同时触发onclick.onmousedown.onmouseup三个事件,事件处理程序执行的先后顺序为:onmousedow

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

在Andrioid开发中,常见的事件如下 单击事件 OnClickListener 长按事件 OnLongClickListener 滑动事件 OnTouchListenner 键盘事件 OnKeyListenner 焦点事件 setOnFoucsChangeListener 设置方式 1.动态设置(最常用的方式) Button btn = (Button) findViewById(R.id.btnTest); btn.setOnClickListener(new View.OnClickLi

【笔记】JavaScript编码规范- 事件&模块

当在事件对象上附加数据时(无论是DOM事件还是如Backbone一样拥有的私有事件),应传递散列对象而不是原始值,这可以让随后的贡献者给事件对象添加更多的数据,而不必去查找或者更新每一个事件处理程序.举个粟子,不要用下面的方式: // bad $(this).trigger('listingUpdated', listing.id); ... $(this).on('listingUpdated', function(e, listingId) { // do something with li

nginx学习笔记五(nginx的事件模块定义)

在linux后台服务器开发领域里面,epoll的大名是早有所闻.<深入理解nginx>一书在第9章-事件模块中就详细说明了epoll相关的系统调用是怎么嵌入到nginx的框架中. 下面说明nginx框架下与事件处理相关的一些模块. 一.ngx_events_module ngx_events_module是核心模块中的一种.之前一直不是很明白核心模块的意思,现在想来,事件模块的核心模块应该是第一个启动的与事件相关的模块.这个模块并不会去处理实际的事件业务,而是会去做一些基本的初始化操作.ngx

学习笔记:javascript body常用事件

Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbeforeprint script 文档打印之前运行的脚本. onbeforeunload script 文档卸载之前运行的脚本. onerror script 在错误发生时运行的脚本. onhaschange script 当文档已改变时运行的脚本. onload script 页面结束加载之后触发. onmess

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

HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStringMap.HTMLAllCollection. HTMLFormControlsCollection等. 一.HTMLCollection.HTMLAllCollection和HTMLFormControlsCollection 三个接口均用于表示一组元素组成的列表.HTMLAllCollecti

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

一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表達式:flags是每一个正則表達式所带的一个或者多个标志. 正則表達式的模式匹配支持三个标志: g:全局模式,即模式应用于整个字符串.而非在发现第一个匹配项时马上停止 i:不区分大写和小写模式 m:多行模式,即到达一行文本末尾是还会继续茶查找下一行中是否存在与模式匹配的项. 1.创建正則表達式 Ja

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

一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式:flags是每个正则表达式所带的一个或者多个标志. 正则表达式的模式匹配支持三个标志: g:全局模式,即模式应用于整个字符串,而非在发现第一个匹配项时立即停止 i:不区分大小写模式 m:多行模式,即到达一行文本末尾是还会继续茶查找下一行中是否存在与模式匹配的项. 1.创建正则表达式 JavaScr

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

在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承,只支持实现继承. 实现继承主要依靠原型链来实现. 一.原型链 原型链是利用原型让一个引用类型继承另一个引用类型的方法,在DOM笔记(十二):又谈原型对象中,描述了构造函数.实例和原型之间的关系: 每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而每个实例都包含一个指向原型对象的内部