事件模型和事件委托

事件模型

一个事件发生后，会在子元素和父元素之间传播。这种传播分成三个阶段。

window→documen→...→目标节点 第一阶段：捕获阶段，从window对象传导到目标节点 第二阶段：目标阶段，事件在目标节点上触发 第三阶段：冒泡阶段，从目标节点传回window对象 IE678的事件模型只有冒泡阶段。

总结:"DOM2级事件"规定事件流的三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会；然后是实际的目标接收到事件；最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应,即:事件捕获->事件处理->事件冒泡

阻止事件冒泡

event.stopPropagation() stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也就是说，该方法阻止事件的传播，比Event.stopPropagation()更彻底。 event.stopImmediatePropagation() event.cancelBubble() IE阻止事件冒泡

事件委托

事件委托原理:事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li;比如给最里面的li加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

案例:

<ul id="ul"> <li>aa</li> <li>bb</li> <li>cc</li> </ul> <script> window.onload = function(){ 　　 var oUl = document.getElementById("ul"); 　　 oUl.onclick = function(ev){ 　　　　 var ev = ev || window.event; 　　　　 var target = ev.target || ev.srcElement; 　　　　 if(target.nodeName.toLowerCase() == 'li'){ 　　　　　　　 console.log(target.innerHTML); 　　　　 } 　　 } } </scropt>

 

事件捕获->事件处理->事件冒泡,父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，怎么只有点击li才会触发呢. Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名 事件委托优点: 1. 只在内存中开辟了一块空间，节省资源同时减少了dom操作，提高性能 2. 对于新添加的元素也会有之前的事件 总结:什么样的事件可以用事件委托，什么样的事件不可以用呢？ 适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。 不适合的就有很多了，举个例子，mousemove，mouseout,每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

 

转载于:https://www.cnblogs.com/darkbluelove/p/11338264.html