js--DOM（事件处理）

js--DOM（事件处理）

  今天学习事件处理程序，其实以前都学过，就是系统的回顾一下。
目录：1.HTML事件处理程序
      2.DOM 0级事件处理程序
      3.DOM 2级事件处理程序
      4.IE事件处理程序
      5.跨浏览器的事件处理程序
还会学习几个API的使用：addEventListener(); removeEventListener(); attachEvent(); detachEvent()

 
事件就是用户或浏览器自身执行的某种动作。如click,load,mouseover,都是事件的名字。而相应某个事件的函数就叫做事件处理程序（或事件监听器）。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick，为事件指定处理程序的方式有好多种：

1.HTML事件处理程序

（1） <input type="button" value="Click me" οnclick="alert('Clicked')"/>

（2） <script type="text/javascript">
         function showMessage(){
             alert("Hello Word!");
         }
     </script>
     <input type="button" value="Click" οnclick="showMessage()"/>
两个缺点：
第一个：上面方法（2）中如果showMessage函数如果在<input>标签的后面就会导致错误。
第二个：HTML代码和JavaScript代码紧密耦合，如果要更换一个时间就要同时修改HTML和JavaScript两个地方。

2.DOM 0级事件处理0程序（现在所有浏览器都支持DOM 0级处理程序）
直接来看例子：

var btn = document.getElementByIdx_x_x("myBtn");
btn.onclick = function(){
      alert("Clicked");
}

这样就很好的解决了耦合现象。

同时也可以删除通过DOM 0级方法指定的事件处理程序：

btn.onclick = null;

3.DOM 2级事件处理程序（除IE外，所有浏览器均支持）
这里就要提到DOM 2级事件处理程序定义的两个方法：
（1）addEventListener   指定事件处理程序
         接受三个参数：①要处理的事件名
                                     ②事件处理的函数
                                     ③一个布尔值（ture表示在捕获阶段调用事件，false在冒泡阶段调用事件）
                                         一般情况下使用false
（2）removeEventListener   删除事件处理程序（里面的参数内容和addEventListener 完全一样）

来看代码：

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

要想删除它：

btn.removeEventListener( ① "click", ② function(){   //这里并不能删除它
      alert(this.id);
}, ③ false);

上面红色代码部分的注释，这个匿名函数并不能被删除，那么就只能只用下面这个办法：

var btn = document.getElementByIdx_x("myBtn");
var handler = function(){
                    alert(this.id);
                }
btn.addEventListener( ① "click", ② handler, ③ false);

这样就可以删除它了：
          btn.removeEventListener( ① "click", ② handler, ③ false);

由于IE并不支持DOM 2级，所以IE就有了自己的事件处理方法。

4.IE事件处理程序
IE独有的两个事件处理方法：
（1）attachEvent():指定事件处理程序
                   接受两个参数：①要处理的事件名
                                 ②事件处理的函数
                                 由于IE中通过冒泡调用事件，所以这个布尔值被省略了
（2）detachEvent()：删除事件处理程序（接受的参数与 attachEvent完全一样 ）
来看例子：

var btn = document.getElementByIdx_x("meBtn");
var handler = function(){
                    alert("this===window");    //true这里的this指的是window
                }
btn.attachEvent("onclick",handler);     //注意这里是onclick，而不是click

删除：

btn.detachEvent("onclick",handler);

5.跨浏览器的事件处理程序
var EventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){                           //DOM 2级（除IE外其他所有浏览器）
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){                         //IE
            element.attachEvent("on"+type.handler);
        }else{                                    //DOM 0级 （在现在浏览器中都用不到）
            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对象，而不用担心浏览器兼容性问题。

      var btn = document.getElementByIdx_x("myBtn");
      var handler = function (){
                       alert("Clicked");
                        };

指定事件 ：EventUtil.addHandler(btn,'click',handler);
删除事件： EventUtil.removeHandler(btn,'click',handler);

DOM0级事件处理和DOM2级事件处理-------简单记法
 

0级DOM

分为2个：一是在标签内写onclick事件

　　　　  二是在JS写onlicke=function（）{}函数

1）

<input id= " myButton "  type= " button "  value= " Press Me "  οnclick= " alert('thanks'); "  >

2）

document.getElementById( " myButton " ).onclick =  function () { alert( ' thanks ' );}

以下是分割线

---

 

1级DOM--(为什么没有1级DOM)

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型 

---

 

2级DOM

只有一个：监听方法，有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。

它们都有三个参数：第一个参数是事件名（如click）；

　　　　　　　　　第二个参数是事件处理程序函数；

　　　　　　　　   第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

• addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
• removeEventListener():不能移除匿名添加的函数。

document.getElementById( " myTest " ).attachEvent( " onclick " , function(){alert( 1 )});
//等价于
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);

 

只有2级DOM包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段

<span> <a></a></span>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document 。

 

1.事件冒泡（常用）

IE中采用的事件流是事件冒泡，先从具体的接收元素，然后逐步向上传播到不具体的元素。

2.事件捕获（少用）

Netscapte采用事件捕获，先由不具体的元素接收事件，最具体的节点最后才接收到事件。

3.DOM事件流