JS----事件机制 事件冒泡 事件捕获 事件委托
仅供个人学习：https://www.jianshu.com/p/d3e9b653fa95
https://www.cnblogs.com/dorra/p/7349747.html
事件委托详解：https://www.cnblogs.com/liugang-vip/p/5616484.html
1.事件流（冒泡，捕获）
2.DOM0事件处理程序
DOM2事件处理程序
跨浏览器事件处理程序
3.事件对象
DOM中事件对象
IE中事件对象
跨浏览器事件对象
4.事件委托
事件对象
兼容触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含了所有与事件有关的信息，
只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完毕，event对象就会被销毁；
js事件机制
参考学习：https://www.cnblogs.com/lazychen/p/5664788.html
DOM0 onclick
DOM0就是直接通过 onclick写在html里面的事件,
1.同一元素绑定了两次或多次相同类型事件，后面的绑定会覆盖前面的绑定。
2.不支持DOM事件流。
DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定;
addEvenlistener：
1.同一元素绑定了两次或多次相同类型事件,所有的绑定会依次触发。
2.支持DOM事件流
3.进行事件绑定传参不需要on前缀
addEvenListener（“click”,function(){},true）//第三个参数为false,则是在冒泡阶段执行。
ie9以前：attachEvent/detachEvent
1.进行事件类型传参需要带上on前缀。
2.这种方式只支持事件冒泡，不支持事件捕获。
3.在事件处理程序的函数中，this不再指向当前元素，而是指向window对象。
事件流
事件： 事件是用户自身或浏览器进行的特定行为。如：用户点击 click事件
事件流：多个事件 按一定顺序触发 形成了事件流
事件名称：如上面所讲的click就是事件名
事件处理函数/事件监听函数（Dom的叫法）就是 事件触发后的处理函数，如obj.οnclick=fn;函数fn就是事件处理函数
事件流描述的是从页面中接收事件的顺序，IE采用事件冒泡流，标准采用事件捕获流，最后addEventLister给出了第三个参数同时支持冒泡与捕获。
事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
事件委托依靠的就是事件冒泡机制
因为把事件绑定到了父节点上，因此省了绑定事件。就算后面新增的子节点也有了相关事件，删除部分子节点不用去销毁对应节点上绑定的事件
事件委托 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dddd</title>
<style>
</style>
</head>
<body>
<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
<script>
var ul1 = document.getElementById("ul1");
var btn = document.getElementById("btn");
var num = 4;
btn.onclick=function(){
var newLi = document.createElement("li");
num++;
newLi.innerHTML = 111*num;
ul1.appendChild(newLi);
}
ul1.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "red";
}
}
ul1.onmouseout = function(){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "white";
}
}
</script>
</html>
