js 事件模型

1.事件模型

(1)原始事件模型

直接给元素绑定事件，只处理当前元素的事件，无事件传递。

(2)IE事件模型

冒泡模型

(3)W3C事件模型

捕获模型+冒泡模型

a.捕获阶段

从document向上（到触发事件的元素方向）传递事件，遇到注册事件就执行。

b.目标阶段

到达触发事件的元素位置，执行事件处理函数。

c.冒泡阶段

从事件触发元素向document方向上传递事件，玉带注册事件就执行。

2.event对象

在W3C规范中，event对像随事件处理函数传入，Chrome FireFox Opera Safari IE9及IE+都支持。IE8及IE8-，event是window对象的一个属性。考虑到兼容性时，如下代码：

var event = event || window.event;

event对象属性：

(1)screenX/screenY(+W3C +IE)

距离显示器左/上位置。

(2)clientX/clientY(+W3C +IE)

距离可视区域左/上位置。

(3)pageX/pageY(-W3C -IE)

距离页面左/上位置。

(4)offsetX/offsetY(-W3C +IE)

距离具有定位属性的父元素的左/上位置。

(5)target(+W3C -IE),srcElement(-W3C +IE)

触发事件的目标元素。

(6)currentTarget(+W3C -IE)

当前处理事件的元素。

(7)preventDefault()(+W3C -IE)

阻止事件的默认行为。

(8)stopPropagation()(+W3C -IE) cancelBubble(-W3C +IE)

阻止事件捕获和冒泡。

  <style type="text/css">
    #container{
      height: 1500px;
      background-color: #e8bcbc;
      position: relative;
    }
    #footer{
      position: absolute;
      top:1000px;
      width:100%;
      height:300px;
      background-color: #94bb94;
    }
    </style>
  <script>
    window.onload = function(){
      var container = document.getElementById('container');
      var footer = document.getElementById('footer');
      container.addEventListener('click',function(event){
        var event = event || window.event;
        console.log('screenX:'+event.screenX+';screenY:'+event.screenY);
        console.log('clientX:'+event.clientX+';clientY:'+event.clientY);
        console.log('PageX:'+event.pageX+';PageY:'+event.pageY);
        console.log('offsetX:'+event.offsetX+';offsetY:'+event.offsetY);
        console.log('target:'+event.target);
        console.log('srcElement'+event.srcElement);
        console.log('currentTarget:'+event.currentTarget);

      },false);
    }
  </script>

 3.事件绑定与解除

(1)原始事件

绑定：

elem.type = observer;

解除：

elem.type = null;

(2)IE

绑定：

elem.attachEvent('type',observer);

解除：

elem.detachEvent('type',observer);

(3)W3C

绑定：

elem.addEventListener('type',observer,isUseCapture);

解除：

elem.removeEventListener('type',observer,isUseCapture);