DOM笔记（五）：JavaScript的常见事件和Ajax小结

朱雀 2022-08-06 01:30 153阅读 0赞

**一、常见事件类型**

1、鼠标事件

<table> 
 <tbody> 
 <tr> 
 <td>事件名称</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>onclick</td> 
 <td>鼠标单击时触发</td> 
 </tr> 
 <tr> 
 <td>ondbclick</td> 
 <td>鼠标双击时触发</td> 
 </tr> 
 <tr> 
 <td>onmousedown</td> 
 <td>鼠标左键按下时触发</td> 
 </tr> 
 <tr> 
 <td>onmouseup</td> 
 <td>鼠标释放时触发</td> 
 </tr> 
 <tr> 
 <td>onmouseover</td> 
 <td>鼠标的光标移动到某对象上时触发</td> 
 </tr> 
 <tr> 
 <td>onmousemove</td> 
 <td>鼠标移动时触发</td> 
 </tr> 
 <tr> 
 <td>onmouseout</td> 
 <td>鼠标光标离开某对象时触发</td> 
 </tr> 
 </tbody> 
</table>

ps:当单击一次鼠标左键的时候，将同时触发onclick、onmousedown、onmouseup三个事件，事件处理程序执行的先后顺序为：onmousedown>onmouseup>onclick.因为按下鼠标产生的动作肯定是在释放鼠标之前的，而一次按下加上一次释放，才代表一次单击，所以onclick最后执行。

2、键盘事件

ps:对键盘的操作也会同时触发这三个事件，其处理程序执行的先后顺序是onkeydown>onkeypress>onkeyup.原因参见鼠标事件。

3、页面事件

<table> 
 <tbody> 
 <tr> 
 <td>事件名称</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>onerror</td> 
 <td>页面出错时触发</td> 
 </tr> 
 <tr> 
 <td>onload</td> 
 <td>页面加载完成时触发</td> 
 </tr> 
 <tr> 
 <td>onresize</td> 
 <td>浏览器窗口大小该表时触发</td> 
 </tr> 
 <tr> 
 <td>onscroll</td> 
 <td>浏览器滚动条的位置发生变化时触发</td> 
 </tr> 
 <tr> 
 <td>onunload</td> 
 <td>页面将被卸载时触发</td> 
 </tr> 
 </tbody> 
</table>

4、表单事件

**二、JavaScript Ajax小结**

1.创建XHR对象

<table> 
 <tbody> 
 <tr> 
 <td>方法</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>new ActiveXObject(“Microsoft.XMLHTTP”)</td> 
 <td>适用于i支持window.ActiveXObject的ie5和ie6等</td> 
 </tr> 
 <tr> 
 <td>new XMLHttpRequest()</td> 
 <td>适用于ie7+/ff/chrome/safari/opera等</td> 
 </tr> 
 </tbody> 
</table>

2、XHR对象的属性和方法

<table> 
 <tbody> 
 <tr> 
 <td>属性或方法</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>readyState</td> 
 <td>通信状态，取值0~4，见后文</td> 
 </tr> 
 <tr> 
 <td>onreadystatechange</td> 
 <td>readyState改变时触发此事件</td> 
 </tr> 
 <tr> 
 <td>responseText</td> 
 <td>服务器返回的文本格式文档</td> 
 </tr> 
 <tr> 
 <td>responseXML</td> 
 <td>服务器返回的XML格式文档</td> 
 </tr> 
 <tr> 
 <td>status</td> 
 <td>状态码，如100，200,404,500等</td> 
 </tr> 
 <tr> 
 <td>statusText</td> 
 <td>状态码对应的文本（OK/Not Found)</td> 
 </tr> 
 <tr> 
 <td>abort()</td> 
 <td>中止当前请求</td> 
 </tr> 
 <tr> 
 <td>open(method,url)</td> 
 <td>打开一个请求</td> 
 </tr> 
 <tr> 
 <td>send(args)</td> 
 <td>发送请求</td> 
 </tr> 
 <tr> 
 <td>setRequestHeader(key,value)</td> 
 <td>设置请求的头部</td> 
 </tr> 
 <tr> 
 <td>getResponseHeader(key)</td> 
 <td>获取响应的头部值</td> 
 </tr> 
 <tr> 
 <td>getAllResponseHeaders()</td> 
 <td>以键值对形式返回所有头部信息</td> 
 </tr> 
 </tbody> 
</table>

3、readyState属性

<table> 
 <tbody> 
 <tr> 
 <td>代码</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>0</td> 
 <td>代表一个未初始化的状态。以创建未初始化的XHR对象</td> 
 </tr> 
 <tr> 
 <td>1</td> 
 <td>代表连接状态。已经调用了open方法，准备发送请求</td> 
 </tr> 
 <tr> 
 <td>2</td> 
 <td>代表发送状态。已经调用了send方法，尚未得到响应数据</td> 
 </tr> 
 <tr> 
 <td>3</td> 
 <td>代表正在接收状态，已经接收了HTTP响应的头部信息，正在接收响应内容</td> 
 </tr> 
 <tr> 
 <td>4</td> 
 <td>代表已经加载状态，此时响应内容已经被完全接收</td> 
 </tr> 
 </tbody> 
</table>

原文首发：[http://www.ido321.com/1327.html][http_www.ido321.com_1327.html]  
  
下一篇：[DOM笔记（六）：怎么进行JQuery扩展？ ][DOM_JQuery_]

[http_www.ido321.com_1327.html]: http://www.ido321.com/1327.html
[DOM_JQuery_]: http://www.ido321.com/1330.html