事件流
1. 含义
描述从页面中接收事件的顺序2. 分类
IE提出的 事件冒泡流 Event BubblingNetscape提出的 事件捕获流 Event Capturing3. 阶段
事件捕获阶段
处于目标阶段
事件冒泡阶段
事件捕获先于事件冒泡执行
dom
dom0：定义句柄方式，兼容性最好dom1：没有事件相关定义dom2：addEventListener / removeEventListener W3C规范事件对象e / window.event
1. W3C标准
e：事件触发后的详细信息，传到事件处理函数的参数里是由MouseEvent构造函数构造的2. IE
作为window的属性：window.event，不再传到事件处理函数的参数里事件源（对象）
在事件对象里可获取到srcElement和target：事件源对象火狐只有targetIE只有srcElementchrome都有【兼容】oDiv.onclick = function (e) {var e = e || window.event,tar = e.target || e.srcElement}
事件委托/事件代理
并不直接给子元素绑定事件，而给父元素绑定（免去了给子元素循环绑定事件的不便）因为子元素被点击后会冒泡给父级判断下事件源tar.tagName.toLowerCase() === 'xxx'则执行相应…获取下标
循环比较获得下标oList.onclick = function (e) {var e = e || window.event,tar = e.target || e.srcElement;for (var i = 0; i < len; i++) {item = oLi[i];if (tar === item) {console.log(i);}}}
数组方法查找下标【企业级写法】注意：todoList案例，不能这样判断添加项和现有项是否重复，因为li是引用值
oList.onclick = function (e) {var e = e || window.event,tar = e.target || e.srcElementvar index = Array.prototype.indexOf.call(oLi, tar);console.log(index);}
自定义属性
<body><ul class="test"><li data-index="0">1</li><li data-index="1">2</li><li data-index="2">3</li><li data-index="3">4</li><li data-index="4">5</li><li data-index="5">6</li></ul><script>var oUl = document.getElementsByClassName('test')[0]oUl.onclick = function (e) {var e = e || window.evar tar = e.target || e.srcElementconsole.log(e)console.log(tar)console.log(Number(tar.getAttribute('data-index')))}</script></body>
