文章标题

JavaScript

事件流

描述的是从页面中接受实践的顺序

• IE ：事件冒泡流

  事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播至最不具体的那个节点(文档)

• 事件捕获

  不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件

---

事件处理程序

• HTML事件处理程序

  js直接加载html结构中

<input type="button" value="点击" id="btn" onclick="alert('1');">

缺点 ： HTML和JS代码紧密耦合在一起，如果修改需要修改两处

• DOM0级处理事件处理程序

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

用的比较多的方法， 简单， 跨浏览器的优势

<input type="button" value="点击2" id="btn2">

var btn2 = document.getElementById('btn2');btn2.onclick = function(){    alert('this is');}//删除事件btn2.onclick = null;

• DOM2级事件处理程序
  定义了两个方法，用于处理指定和删除事件处理程序的操作
  addEventListener() 和 removeEventListner()
  接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值，true表示是事件捕获，false表示事件冒泡流

<input type="button" value="点击3" id = "btn3">

不可以加 ‘on’,add添加的事件只能使用remove删除，可以添加多个事件，按先后执行

var btn3 = document.getElementById('btn3');btn3.addEventListener('click',showMys,false);\btn3.addEventListener('click',function(){    alert(this.value);},false);//删除事件btn3.removeEventListener('click',showMes,false);

• IE事件处理程序

  attachEvent() 添加事件
  detachEvent() 删除事件

  接收相同两个参数，事件处理程序的名称和时间处理程序的函数，需加上’on’

• 跨浏览器事件处理程序

<sctipt>        var eventUtil = {            addHandler : function(elemnent,type,handler){                if(element.addEventListener){                    element.addEventListener(type,handler,false);                }else if(element.attachEvent){                    element.attachEvent('on'+type,handler);                }else{                    //element.on === element[on];                    element['on'+type] = handler;                }            }        }        eventUtil.addHandler(btn3,'click',showMes);    </sctipt></body>