为事件指定相应的 JavaScript 函数,这些函数通常被称为事件监听器
(event listener)或事件处理器(event handler)。

内联 HTML 属性法
最简便也最难以维护的方式就是通过标签的特定属性来添加事件

元素属性法
关于单击事件函数,我们还有另一种编写方式,那就是将其设置为 DOM 元素节点的属性。
事实上这也是一种更好的选择。因为这种方式可以帮助我们理清

与相关JavaScript代码之间的关系。一般情况下。我们总是希望页面中的内容归 HTML、行为归 JavaScript、格式归 CSS,并且三者之间应该尽可能彼此独立,互不干扰。
但这个方法也是有缺点的,因为这种做法只允许我们指定一个事件函数,这就好像我们的收音机只能有一个听众一样。当然,我们可以对多个事件使用同一个处理函数,但这样做始终不太方便,就好像我们每次都得让所有的收音机听众都集中在一个房间里一样。

DOM 的事件监听器
对于浏览器来说,最佳的事件处理方式当然莫过于出自 DOM Level 2 的事件监听器了。通过这种方式,我们可以为一个事件指定多个监听器函数。当事件被触发时,所有的监听器函数都会被执行。而且,这些监听器之间不需要知道彼此的存在,它们的工作是彼此独立的。任何一个函数的加入或退出都不会影响其他监听器的工作。

捕捉法与冒泡法
当我们单击该链接时,实际上我们也单击了列表项

、乃至于整个 document 对象,这种行为称之为传播(propagation)。换句话说,对该链接的单击也可以看做对 document 对象的单击。事件传播过程通常有两种方式:
1. 事件捕捉(event capturing)—单击首先发生在 document 上,然后依次传递给body、列表、列表项,并最终到达该链接,称为捕捉法。
 2.事件冒泡(event bubbling)—单击首先发生在链接上,然后逐层向上冒泡,直至 document 对象,称为冒泡法。

按照 DOM Level 2 的建议,事件传播应该分成三个阶段:先是捕捉标签,然后到达对象,再冒泡(见图 7-13)。也就是说,事件传播的路径应该是先从 document 到相关链接(标签),然后回到 document。如果想要了解某一事件当前所处的阶段,我们可以去访问事件对象的 eventPhase 属性。

可以通过如下方式处理事件捕获:
 通过 addEventListener()的第三个参数,我们可以决定代码是否采用捕捉法来处理事件。然而,为了让我们的代码适用于更多的浏览器,最好还是始终将其设置为 false,即只使用冒泡法来处理事件。
 我们也可以在监听器函数中阻断事件的传播,令其停止向上冒泡,这样一来,事件就不会再到达 document 对象那里了。为了做到这一点,我们就必须去调用相关事件对象的 stopPropagation()方法。
 另外,我们还可以采用事件委托。例如,如果某个

中有 10 个按钮,那么,通常每个按钮都需要一个事件监听器,这样一来,我们就要设置 10 个监听器函数。而更聪明的做法是,我们只为整个 设置一个监听器,当事件发生时,让它自己去判断被单击的是哪一个按钮。

阻断传播
需要注意的是,按照 DOM 标准来说,window 事件是不存在的。这就是为什么 DOM指的是文档而不是浏览器。因此,实际上浏览器对于 window 事件的实现与 DOM 事件的实现并不一致。
addEventListener()方法的对立面就是 removeEventListener(),该方法的参数与前者相同。
如果我们要移除某个监听器,就必须获得之前那一个指定为监听器函数的指针。否则,即便它们的函数体完全相同也无济于事,因为它们两者不是同一个函数。

防止默认行为
在浏览器模型中,有些事件自身就存在一些预定义行为。例如,单击链接会载入另一个页面。对此,我们可以为该链接设置监听器,并使用 preventDefault()方法禁用其默认行为。

跨浏览器的事件监听器
现在绝大部分的浏览器都已经完全实现了 DOM Level 1 标准。然而,事件方面的标准化是到 DOM Level 2 才完成的。这就导致了 IE9 以前的版本与其他现代浏览器在这方面的实现有着不少的差异。
IE 的实现的不同之处:
1.IE 中没有 addEventListener()方法,但它们从 IE5 开始就提供了一个叫做
attachEvent()的等效方法。对于更早期的版本,我们就只能通过属性方法(例如 onclick 属性)来解决问题了。
2. 对于单击事件来说,使用 attachEvent()就等同于使用 onclick 属性。
3.如果我们使用老式手法来进行事件监听(例如,通过将某个函数赋值给 onclick属性),那么当该回调函数被调用时,它不会获得相关的事件参数。但只要我们设置了事件监听器,IE 中总会有一个全局对象 window.evnet 会指向该事件。
4.在 IE 的事件对象中,没有用于反映触发事件目标元素的 target 属性,但我们可以使用它的等效属性 srcElement。 
5.IE 不支持事件捕捉法,而只使用冒泡法来运作。
6.IE 中没有 stopPropagation()方法,我们可以通过将 IE-only 属性 cancelBubble设置为 true 来完成相同的操作。
7.IE 中没有 preventDefault()方法,我们可以通过将 IE-only 属性 returnValue设置为 false 来完成相同的操作。
8.对于事件的取消监听操作,IE 中使用的不是 removeEventListener()方法,我们要调用的是 detachEvent()方法。

XMLHttpRequest 对象

XMLHttpRequest()是一个用构建 HTTP 请求的 JavaScript 对象(构造器)。从历史上来说,XMLHttpRequest(简称 XHR)最初在 IE 浏览器中是以 ActiveX 对象的形式被引入的。但正式实现该对象则是始于 IE7,那时候也只是该浏览器中的一个本地对象,后来逐渐被其他浏览器所接受,并形成了一种通用的跨浏览器实现,这就是所谓的 AJAX 应用。这种应用模式可以使我们无须每次都通过刷新整个页面来获取新内容。我们可以利用
JavaScript将相关的HTTP请求发送给服务器端,然后根据服务器端的响应来局部更新页面。总而言之,通过这种方式构建出来的页面在许多响应方式上会更类似于桌面应用。

AJAX 就是在 JavaScript 和 XML 之间所建立的一种异步联系:

1.之所以是异步,是因为我们的代码在发送 HTTP 请求之后,不需要特地停下来等待服务器响应,可以继续执行其他任务,待相关信息到达时自然会收到通知(通常以事件的形式出现)。
2. JavaScript—它的作用很明显,XHR 对象就是用 JavaScript 来创建的。
3.至于用 XML,则是因为开发者最初设计这种 HTTP 请求就是用来获取 XML 文档,并用其中的数据来更新页面的。但是如今这种做法已经不太常见了,这种方式更多地用来获取纯文本格式的数据,JSON 格式的数据,或只是一段等待被插入页面的 HTML 数据。

关于 XMLHttpRequest 对象的用法,主要可以分为两个有效步骤:

1.发送请求—在这一步骤中,我们需要完成 XMLHttpRequest 对象的构建,并为其设置事件监听器。
2.处理响应—在这一步骤中,事件监听器会在服务器的响应信息到达时收到通知,然后相应的代码就会被执行。

每个 XHR 对象中都有一个叫做 readyState 的属性。一旦我们改变了该属性
的值,就会触发 readystatechange 事件。该属性可能的状态值如下:
0—未初始化状态;
1—载入请求状态;
2—载入完成状态;
3—请求交互状态;
4—请求完成状态。

A 代表异步
X 代表 XML

事件为事件指定相应的 JavaScript 函数,这些函数通常被称为事件监听器(event listener)或事件处理器(event handler)。内联 HTML 属性法最简便也最难以维护的方式就是通过标签的特定属性来添加事件元素属性法关于单击事件函数,我们还有另一种编写方式,那就是将其设置为 DOM 元素节点的属性。事实上这也是一种更好的选择。因为这种方式可以帮助我们理清与相关JavaScript代码之间的关系。一般情况下。我们总是希望页面中的内容归 HTML、行为归 JavaScri
本文实例讲述了js中addEventListener()与removeEventListener()用法。分享给大家供大家参考,具体如下: 所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法,用于追加 事件 和删除追加。 接受参数:要处理的 事件 名、作为 事件 处理程序的函数和一个布尔值。 (3个) 最后这个布尔值参数是true,表示在捕获阶段调用 事件 处理程序;如果是false,表示在冒泡阶段调用 事件 处理程序。默认为false; 事件 传递有两种方式:冒泡与捕获。 事件 传递定义了元素 事件 触发的顺序。 如果你将 <p> 元素插入到 <div>
XMLHttpRequest EventTarget.onabort 包含当请求中止并且abort该 对象 接收到 事件 时要调用的函数。 XMLHttpRequest EventTarget.onerror 包含当请求遇到错误并且error此 对象 接收到 事件 时调用的函数。 XMLHttpRequest EventTarget.onload 包含在成功获取内容后HTTP请求返回并且load此 对象 ...
JS 回调函数,传参的办法。 function uploadFile(t) { var fd = new FormData(); fd.append("_netLogo", document.getElementById('_netLogo').files[0]); var xhr = new XMLHttpRequest (); // ...
open(method:string, url:string, async?:boolean=true, username?:string, password: string) 用于创建HTTP请求,但请求并未发送。 method, 请求类型,如GET、POST等,大小写不敏感。 url,U... 一.addEventListener()和removeEventListener()讲解      addEventListener()与removeEventListener()用于处理指定和删除 事件 处理程序操作。      它们都接受3个参数:如     addEventListener(" 事件 名" , " 事件 处理函数" , "布尔值");    ...