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>

JS----事件机制 事件冒泡 事件捕获 事件委托

JS----事件机制事件冒泡事件捕获事件委托