三个阶段

  1. 捕捉阶段：捕捉阶段是先从父元素开始一级级向上查问子元素的
  2. 处于指标阶段：事件从最顶层的子节点一步步冒泡到各级父元素阶段
  3. 冒泡阶段
如何查看以后事件的阶段？
办法：e.eventPhase：
数值1示意:捕捉阶段 数值2：指标阶段 数值3：冒泡阶段

注册事件

创立事件的三种形式

第一种形式：onclick
btn.onclick = function () {}无奈给同一个对象的同一个事件注册多个事件处理函数

第二种形式：addEventListener

 btn.addEventListener('click', function () {                alert('hello world');            })
IE9当前才反对

第三种形式：attachEvent

 btn.attachEvent('onclick',function(){                alert('hello world');            })
只有IE老版本浏览器反对,IE6-10

解决注册事件兼容性问题：

 // 解决注册事件的兼容性问题    // eventName, 不带on，  click  mouseover  mouseout    function addEventListener(element, eventName, fn) {      // 判断以后浏览器是否反对addEventListener 办法      if (element.addEventListener) {        element.addEventListener(eventName, fn);  // 第三个参数 默认是false      } else if (element.attachEvent) {        element.attachEvent('on' + eventName, fn);      } else {        // 相当于 element.onclick = fn;        element['on' + eventName] = fn;      }    }

移除事件

如果想要移除事件，注册事件的时候不能用匿名函数

第一种办法：

 var btn = document.getElementById('btn');     btn.onclick=function(){     alert('hello world');     //移除事件      btn.onclick = null;      }

第二种办法：罕用

 var btn = document.getElementById('btn');   function onClick() {    alert('hello liuheng');    btn.removeEventListener('click', onClick);    }  btn.addEventListener('click', onClick);

第三种办法：只有IE9-10反对(attachEvent配套应用)

function onClick(){                alert('hello world');                btn.detachEvent('onclick',btnClick);            }   btn.attachEvent('onclick',btnClick);

兼容性解决

// 解决移除事件的兼容性解决function removeEventListener(element, eventName, fn) {  if (element.removeEventListener) {    element.removeEventListener(eventName, fn);  } else if (element.detachEvent) {    element.detachEvent('on' + eventName, fn);  } else {    element['on' + eventName] = null;  }}

addEventListener的第三个参数的作用：

flase:事件冒泡（内>外）
true:事件捕捉（外<内）

btn.onclick和btn.attachEvent只有事件冒泡，没有事件捕捉

事件委托

原理：事件冒泡

e 事件参数（事件对象）：当事件产生的时候，能够获取一些和事件相干的数据。

e.target是真正触发事件的对象

解决兼容性问题：
var target = e.target || e.srcElement;后者是兼容IE老版本浏览器

e.currentTarget：事件处理函数所属的对象(和this一样)

事件对象

e是事件对象，在老版本IE中获取事件对象的形式：window.event

解决兼容性问题：e = e || window.event;

e.eventPhase：事件的阶段 1:捕捉阶段 2：指标阶段 3：冒泡阶段

e.type：获取事件名称（简化注册事件）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        #box{            width: 100px;            height: 100px;            background-color: red;        }    </style></head><body>    <div id="box"></div>    <script>        var box = document.getElementById('box');        box.onclick= fn;        box.onmouseover = fn;        box.onmouseout = fn;        function fn(e){            e =  e || window.event;            switch(e.type){                case 'click':                console.log('点击box');                break;                case 'mouseover':                console.log('鼠标通过box');                break;                case 'mouseout':                console.log('鼠标来到box');                break;            }        }    </script></body></html>

勾销默认行为执行

  1. return false(罕用)
  2. DOM规范办法：

e.preventDefault

  1. IE的老版本，非标准形式

e.returnValue = false

进行事件流传，勾销冒泡

e.stopPropagation();:规范的DOM办法
e.cancelBubble = true：非标准的DOM办法，老版本IE反对