事件流
1. 含义
- 描述从页面中接收事件的顺序
2. 分类
- IE提出的 事件冒泡流 Event Bubbling
- Netscape提出的 事件捕获流 Event Capturing
3. 阶段
-
事件捕获阶段
-
处于目标阶段
-
事件冒泡阶段
-
事件捕获先于事件冒泡执行
dom
- dom0:定义句柄方式,兼容性最好
- dom1:没有事件相关定义
- dom2:addEventListener / removeEventListener W3C规范
事件对象e / window.event
1. W3C标准
- e:事件触发后的详细信息,传到事件处理函数的参数里
- 是由MouseEvent构造函数构造的
2. IE
- 作为window的属性:window.event,不再传到事件处理函数的参数里
事件源(对象)
- 在事件对象里可获取到srcElement和target:事件源对象
- 火狐只有target
- IE只有srcElement
- chrome都有
- 【兼容】
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.srcElement
var 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.e
var tar = e.target || e.srcElement
console.log(e)
console.log(tar)
console.log(Number(tar.getAttribute('data-index')))
}
</script>
</body>