1. this和event.target：
this会冒泡，e.target不冒泡就是指向事件触发的dom。
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标dom元素；
Example：
<div id="aa">
aa
<div id="bb">
bb
<div id="cc">cc</div>
</div>
</div>
<script>
function print(e){
console.log(this);
console.log(e.target);
}
aa.addEventListener('click',print); //第三个参数默认为false
bb.addEventListener('click',print);
cc.addEventListener('click',print);
</script>
点击cc div：
2. 冒泡 、捕获、 委托，闭包，默认行为，常用冒泡事件
事件冒泡 event bubbling（false）：
注意：传递的仅仅是事件,并不传递所绑定的事件函数,所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了事件捕获 event capturing（true）：
事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)，与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
event.stopPropagation(); //1.阻止事件冒泡和捕获，但是不会阻止默认行为；
return false //2.既阻止了浏览器默认行为，也阻止了冒泡；
event.preventDefault(); // 3.阻止默认行为，不阻止事件冒泡
Example：
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var div3=document.getElementById('div3');
div1.addEventListener('click'，fn，true)；
div2.addEventListener('click'，fn，true)；
div3.addEventListener('click'，fn，true)；
function fn(){
console.log(this.id);
}
*** 事件捕获 点击div3:***
- 事件委托
事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）
原理：事件冒泡
Example：
<ul id="ul">
<li id="li-1">1</li>
<li id="li-2">2</li>
<li id="li-3">3</li>
<li id="li-4">4</li>
<li id="li-5">5</li>
</ul>
<script>
// 给ul添加监听器
document.getElementById("ul").addEventListener("click",function(e) {
// e.target是被点击的元素! this是ul元素!
// 筛选触发事件的子元素如果是li执行的事件
if(e.target && e.target.nodeName == "LI") {
// 获取到具体事件触发的li，输出其id7
console.log("List item ",e.target.id.replace("post-")," was clicked!");
}
});
</script>
- 闭包
Example：
eg; var btns=document.getElementsByTagName('button');
for (var i=0;i<btn.length;i++)
(function (i) { //形成闭包，将作用域进行限定
btns[i].addEventListener('click',function () {
console.log('第'+i+"按钮被点击");
});
})(i);
}
- 默认行为:
<a href="www.baidu.com">，当点击a标签时，他自然会跳转到百度搜索页；
<input type="checkbox">，当点击该CheckBox时，他就会被勾选中；
<button type="submit">，点击按钮后，页面就会提交表单的信息
阻止浏览器默认行为:
W3C写法： e.preventDefault()
IE写法： window.event.returnValue = false
Example:
function handlePropagation(e) {
let e = e || window.event
if (e.preventDefault) {
e.preventDefault(); // 除IE外
} else {
e.returnValue = false; // IE专属
}
}
- 常用冒泡事件：
click
dblclick
copy
cut
drag
mouseover 指针移动到有监听事件的元素，或其子元素内（有渗透，作用范围渗透到其子元素）
mouseout 指针移出元素，或移出他的子元素
不冒泡事件：
blur
focus
load
unload
... to be continued...
