js 事件

浏览数：21 / 时间：2015年06月09日

js 事件
事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那

个节点）接收，然后逐级上传播到较为不具体的节点（文档）。所有

浏览器都支持
但IE如下:
<html>
<head>
<title>lin3615</title>
</head>
<body>
<div id="myDiv">click me</div>
</body>
</html>
如果点击了页面的 div 元素，则传播顺序为
div -> body -> html -> document

document        4 ↖
element html     3 ↖
    element body   2 ↖
      element div 1 ↖

firefox 等则用的是事件流叫事件捕获,其思想是从不太具体的节点

应该更早接收到事件，而最具体的节点应该最后接收到事件。
如上面代码， div 元素被点击了，则发生顺序如下
document -> html -> body ->div

document ↘
html    ↘
    body ↘
      div ↘

DOM事件流，（IE不支持）
事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段

。首先发生的是事件捕获，然后是实际的目标接收到事件。最后才是

冒泡阶段。

1↘ document 7↖
   2↘   html 6↖
     3↘   body 5↖
          div   4↖

事件处理程序（或事件侦听器）
事件就是用户或浏览器自身执行的某种动作，诸如 click,load 和

mouseove,都是事件的名字。而响应事件的函数就叫做事件处理程序（

或事件侦听器）。事件处理程序的名字是以 "on"开头，因此， click

事件的事件处理程序就是 onclick,load 事件的处理程序就是

onload.为事件指定处理程序的方式有几种，如下

HTML事件处理程序：
<input type="button" value="click me" onclick="alert

(‘lin3615‘)" />

DOM0级事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick=function()
   {
       alert("lin3615");
   }

DOM2级事件处理程序(少用为好)
定义了两个方法，用于处理指定和删除事件处理程序的操

作:addEventListener()和 removeEventListener(),它们都接受三个

参数，要处理的事件名，作为事件处理程序的函数和一个布尔值，和

一个布尔值。最后一个值如果是 true,表示在捕获阶段调用事件处理

程序。如果是 false，表示在冒泡阶段调用事件处理程序.

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
           alert(this.id);
       }, false);

可以添加多个事件：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
           alert(this.id);
       }, false);
btn.addEventListener("click", function(){
           alert("hi,lin3615");
       }, false);

通过 addEventListener()添加的事件，只能用

removeEventListener()来先移除。上面是通过匿名函数加入的，所以

无法销除。

只有如下的方式才能销除

var btn = document.getElementById("myBtn");
var handler = function(){
           alert(this.id);
       };

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

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

IE事件处理程序
有两个类似的方法: attachEvent() 和 detachEvent();这两个方法接

受参数相同：事件处理程序名称与事件处理程序函数。由于IE只支持

事件冒泡，所以通过 attachEvent添加的事件处理程序都会被添加到

冒泡阶段。

   var btn = document.getElementById("myDiv");

   btn.attachEvent("onclick", function(){
           alert("hi");
       });
此时的事件程序名称为 onclick
同样可以添加多个事件处理程序
var btn = document.getElementById("myDiv");
btn.attachEvent("onclick", function(){
               alert("hi")
           });
btn.attacheEvent("onclick", function(){
               alert("lin3615");
       });

detachEvent()移除相应的事件处理程序
var btn = document.getElementById("myBtn");
var handler = function(){
   alert("lin3615");
   };
btn.attachEvent("onclick", handler);

btn.detachEvent("onclick", handler);
==============
跨浏览器事件处理程序
   var btn = document.getElementById("myDiv");
   var handler = function(){
           alert("lin3615");
       };
   var EventUtil = {
       addHandler: function(element, type, handler)
           {
               if(element.addEventListener)
               {


element.addEventListener(type, handler, false);
               }else if(element.attachEvent)
               {
                   element.attachEvent

(‘on‘+type, handler);
               }else
               {
                   element["on"+type] =

handler;
               }

           },
       removeHandler: function(element, type,

handler)
           {
               if

(element.removeEventListener)
               {


element.removeEventListener(type, handler, false);
               }else if(element.detachEvent)
               {


element.detachEvent("on"+type, handler);
               }else
               {
                       element

["on"+type] = null;
               }

           }
   };
// 添加事件
   EventUtil.addHandler(btn, "click", handler);

   // 移除事件
   EventUtil.removeHandler(btn, "click", handler);

==============
事件类型

鼠标事件：

click,dblclick,mousedown,mouseout,mouseover,mousemove,mouseup

键盘事件
keydown, keypress, keyup

html 事件

load/unload/abort/error/select/change/submit/reset/resize/scr

oll/focus/blur