JavaScript中的事件

JavaScript与html的交互是通过事件来实现的。1）事件：概念：用户或浏览器自身执行的某种动作。2）事件流：概念：页面中不同节点接收事件的顺序。分类：事件冒泡：概念：事件开始时是由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后事件会沿着DOM树逐级向上传播，在每一个节点上都会发生，直到传播到document对象。举例：div -> body -> html -> document -> window事件捕获：概念：事件开始时是由最不具体的节点接收，然后事件会沿着DOM树逐级向下传播，直到传播到实际的目标节点；这样就可以在事件传播到实际的目标节点之前将它捕获。举例：window -> document -> html -> body -> divDOM事件流概念："DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于实际目标阶段、事件冒泡阶段说明：现在常用的浏览器会在捕获阶段和冒泡阶段均触发事件对象上的事件，也就是说：处于实际目标阶段既属于捕获阶段，也属于冒泡阶段。3）事件处理程序(事件监听器)：概念：响应某个事件的函数。事件处理程序的名字以"on"开头，例如：click事件的事件处理程序就是onclick。分类：1)html事件处理程序说明：一个元素支持的所有事件，都可以用一个 与对应的事件处理程序同名的html属性 来指定。例如：click事件可以用onclick属性来指定。<input type="button" value="点我" onclick="" />缺点：更换事件处理程序时需要同时更改html页面和js代码。2)在JavsScript中指定处理程序注意：在事件处理程序中，this指向当前元素。1>DOM0级事件处理程序var btn = document.getElementById("myBtn");// 添加事件处理程序btn.onclick = function(){alert("Clicked!");} // 删除事件处理程序btn.onclick = null;说明：以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。2>DOM2级事件处理程序var btn = document.getElementById("myBtn");btn.addEventListener("click", function(){alert(this.id);}, false);参数：第一个参数：事件名。第二个参数：事件处理程序的函数。第三个参数：布尔值，为true表示在捕获阶段调用事件处理程序；为false表示在冒泡阶段调用事件处理程序。说明：1)可以通过多次调用addEventListener()方法来实现多个事件处理程序的添加。注意：多个事件处理程序会按照添加它们的顺序触发。2)通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除注意：移除时传入的参数与添加时使用的参数相同，所以通过addEventListener()添加的匿名函数将无法移除。4）事件对象：概念：在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着：触发事件的元素、事件的类型等所有与事件有关的信息。说明：1)浏览器会将event对象传入到事件处理程序中2)只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。3)event对象的成员：type：被触发的事件类型currentTarget：事件处理程序绑定的元素，注意：在事件处理程序中this始终等于currentTarget。target：发生事件的元素举例：例子一：<input type="button" value="点我" onclick="alert(event.type)" />// clickvar btn = document.getElementById("myBtn");btn.onclick = function(event){alert(event.type);// click} var btn = document.getElementById("myBtn");btn.addEventListener("click", function(event){alert(event.type);}, false);// click例子二：document.body.onclick = function(event){alert(event.currentTarget === document.body);// truealert(this === document.body);// truealert(event.target === document.getElementById("myBtn"));// true}说明：1)当单击body中id为"myBtn"的按钮时，由于按钮上并没有绑定事件处理程序，所以click事件直到冒泡到了body才被处理。2)按钮是实际发生事件的元素，即event.target；而body是事件处理程序绑定的元素，即event.currentTarget。