事件 ( 13 章 )-白红宇

事件 ( 13 章 )

阅读量：6875 次

发布时间：2019-06-26

本文共 4738 字，大约阅读时间需要 15 分钟。

JavaScript与HTML之间的交互是通过事件实现的。可以使用监听器( 或处理程序 ) 来预订事件，以便事件放生时执行相应的代码。观察员模型.

事件流

事件冒泡 : 有内向外的顺序扩散( 沿着DOM树依次向上 )

事件捕获 ( 很少有人使用 )

沿着DOM树依次向下

1）document

2）html

3）body

4）div

在事件捕获过程中，ducument对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，即 div 元素

由于老版本的浏览器不支持, 因此很少有人使用事件捕获, 我们也建议读者放心的使用事件冒泡.

“DOM2级事件” 规定的事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段

事件捕获阶段：为截获事件提供了机会

处于目标阶段：实际的目标接收到事件

事件冒泡阶段：对事件作出反应

事件处理程序 ( 事件监听器 )

事件就是用户或浏览器自身执行的某种动作。例如 click , load，mouseover。而响应某个事件的函数就叫做事件处理程序。事件处理程序的名字以”on”开头，所以以上的事件处理程序就是 onclick , onload , onmouseover。

某个元素支持的每种事件, 都可以使用一个与相应事件处理程序同名的HTML特性来指定, 例如:

function showMessage() {

alert("Hello world!");

}

</script>

当然也可以包含在一个外部文件中, 事件处理程序中的代码在执行时, 有权访问全局作用域的任何代码. 这样, 会创建一个封装着元素属性值的函数, 这个函数中有个局部变量 event, 也就是事件对象, <input type="button" value="Click me" οnclick="alert(event.type)" /> (已经测试, 显示的是 "click"), 通过 event 对象可以直接访问事件对象, 你不用自己定义它, 也不用从函数列表中读取, 在这个函数内部, this 值等于事件的目标元素, 例如: <input type="button" value="Click me" οnclick="alert(this.value)" /> (已经测试, 显示的是"click me", 所以 this 即元素本身)

2个问题 ( 缺点 )

1.时差问题，有可能存在，用户已经触发事件，例如 click，但是onclick还没有被加载，导致错误。

2.通过HTML指定事件处理程序HTML与JavaScript代码是紧密耦合。如果要更换事件处理程序，就要改动HTML代码和JavaScript代码。

所以，通过JavaScript指定事件处理程序。

JavaScript指定事件处理程序（解决上边 2个缺点 )

传统方式，就是将一个函数赋值给一个事件处理程序属性。如上边的例子

首先，要取得一个要操作的对象的引用。每个元素(包括window和document)都有自己的事件处理程序属性，将这个属性值设置为一个函数，就可以指定事件处理程序。

DOM 0级事件处理程序

1:  var btn = document.getElementById("myBtn");

2:  btn.onclick = function(){

3:      alert("Click");

4:  };

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理. (目前我们就使用这种)

在此，我们通过文档对象取得了一个按钮的引用，然后为它指定了onclick事件处理程序，但是，注意，在这些代码运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就又可能在一段事件内证明单击也没有反应。

btn.onclick = null ; //删除事件处理程序

DOM 2级事件处理程序

addEventListener()，removeEventListener()，所有的节点都包含这两种方法，并且接收3个参数，要处理的事件名，作为事件处理程序的函数和一个布尔值。如果布尔值是 true表示在捕获阶段调用事件处理程序，如果是false,表示在冒泡阶段调用事件处理程序。

1:  var btn = document.getElementById("myBtn");

2:  btn.addEventListener("click",function(){

3:      alert(this.id);

4:  },false);

removeEventListener(“click”, “与addEventListener相同”,false); 其中的函数必须要与addEventListener相同，所以，使用上面个的匿名函数时不行的。

1:  var btn = document.getElementById("myBtn");

2:  var handler = function(){

3:      alert(this.id);

4:  };

5:  btn.addEventListener("click",handler,false);

6:

7:  btn.removeEventListener("click",handler,false);

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。（ IE9+ , 支持 dom2 )

IE 事件处理程序(只针对 IE 浏览器)

attachEvent 等同于 addEventListener , 接收 2 个参数，事件名，和处理函数，例如 :

IEvar btn = document.getElementById("myBtn");var handler = function () {  alert("Clicked");} ;btn.attachEvent("onclick" , handler);detachEvent 等同于 removeEventListenerbtn.detachEvent(“onclick”, handler);

事件对象

在触发DOM上的某个事件时，会产生一个事件对象 event，包含所有与事件有关的信息。DOM0和DOM2会将事件传入到事件处理程序中。

eventvar btn = document.getElementById("myBtn");// dom 0btn.onclick = (event){	alert(event.type)  // "click"};// dom2btn.addEventListener("onclick", (event){  alert(event.type)  // "click"},  );