DOM事件介绍

本章内容
1、理解事件流
2、使用事件处理程序

一、事件流

事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

1.事件冒泡

• • 事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。
  • 如：你点击按钮的同时，也点击了包含按钮的div,也同时点击了包含div的整个HTML,也同时认为点击了document
  • 一级一级的往上冒泡，一直到document,这个事件就叫做事件冒泡

2.事件捕获

• • 跟事件冒泡正好相反；
  • 事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
  • 事件捕获认为先捕获document.然后是让HTML接收,再是让div接收,最后是input接收；
  • 一级一级的往下捕获，一直到input,这个事件就叫做事件捕获；

二、事件处理程序

• HTML事件处理程序
• DOM0级事件处理程序
• DOM2级事件处理程序
• IE事件处理程序

1. HTML事件处理程序
   • 事件是直接加载在HMTL的结构里的；
   • 最大的缺点：HMTL和js代码紧密耦合在一起；
   • 优点，可以添加多个事件处理程序
   • 写在HTML里

     • <input type=”button” value=”按钮” id=”btn” οnclick=”alert(‘hello’)”>

   • 封装在函数里

     • <script>
       	function showMessage(){
       		alert(“heollw word!”);
       	}
       </script>
       

       
       
       
2. DOM0级事件处理程序

   • 传统的方式：把一个函数赋值给一个事件的处理程序属性

   • 优点，用的比较多的方法，简单，跨浏览器 ，可以添加多个事件处理程序

   • 事例

     • var bt2 = document.getElementById(“btn2”);
       bt2.οnclick=function(){
           alert(“这是通过DOM0级添加事件”);
       }
       bt2.οnclick=null   /删除onclick 属性	
       

       
       
3. DOM2级事件处理程序

   • DOM2级事件定义了两个方法：

   • 用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。

   • 它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

   • 优点，可以添加多个事件处理程序 ；缺点，IE不支持

   • DOM2级添加事件

     • btn3.addEventListener(‘click’);  //所有带on的事件，都要把on去掉；
       btn3.addEventListener(‘click’,showMes,false);  

   • DOM2级删除事件

   1. • btn3. removeEventListener (‘click’,showMes,false); 

        
        
4. IE事件处理程序

   • btn3.attachEvent(‘onclick’, showMes);  //添加事件

   • btn3.datachEvent(‘onclick’, showMes);  //删除事件
     

     
     

   • 这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数

   • 不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡