事件冒泡/捕获
| 事件冒泡 | 事件捕获 |
|---|---|
| IE和标准浏览器 | 标准浏览器 |
| 传播顺序：先捕获，后冒泡 | |
| 早期IE只支持事件冒泡，不支持事件捕获 | |
绑定事件
| .addEventListener('click',function(){}，false) | .attachEvent('onclick',function(){}) |
|---|---|
| 标准浏览器 | IE |
|
三个参数:
1.事件类型，没有on 2.事件处理函数 3.布尔型的数值，默认false（事件冒泡），true（事件捕获） |
有两个参数：
1.事件类型，有on 2.事件处理函数 |
| 阻止事件冒泡/捕获 : e.stopPropagation(); | 阻止事件冒泡 : window.event,cancelBubble=true |
|
问题：
1.顺序相反 2.this指向window |
事件冒泡优点
1.有很多子元素，并且绑定同一种事件，可以委托给父元素代理（事件代理/事件委托）
<body>
<ul id="ul1">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<script>
var oUl = document.getElementById('ul1');
oUl.onclick = function(e){
//获取事件源
var target=e?target = e.target:window.event.srcElement;
console.log(target.innerHTML);
};
</script>
</body>
2.对于后生成事件的绑定，可以用事件委托
<body>
<button id="btn">增加</button>
<ul id="ul1">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<script>
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var oBtn = document.getElementById('btn');
oUl.onclick = function (e) {
console.log(e.currentTarget);//this
console.log(e.target);//事件源
};
oBtn.onclick = function () {
var oLi = document.createElement('li');
oLi.innerHTML = Math.random();
oUl.appendChild(oLi);
};
</script>
</body>
e.currentTarget=this
e.target获取事件源
可以通过e.currentTarget和e.target的比较得知是不是由事件冒泡触发的总结：事件模型/事件冒泡/事件委托：利用事件冒泡，把子元素委托给父元素绑定
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。