javascript事件流( 二 ) _javascript

vardiv = document.getElementById("myDiv");EventUtil.addEventHandler(div,"myEvent", function () {alert("div myEvent!");});EventUtil.addEventHandler(document,"myEvent",function(){alert("document myEvent!");});if(document.implementation.hasFeature("CustomEvents","3.0")){var e = document.createEvent("CustomEvent");e.initCustomEvent("myEvent",true,false,"hello world!");div.dispatchEvent(e);}这个例子中创建了一个冒泡事件“myEvent” 。而event.detail的值被设置成了一个简单的字符串，然后在div和document上侦听该事件，因为在initCustomEvent中设置了事件冒泡。所以当div激发该事件时，浏览器会将该事件冒泡到document 。
阻止冒泡stopPropagation函数
btn.addEventListener('click',function(ev){ev.stopPropagation();console.log('阻止冒泡')}, false)事件委托（事件代理）原理如果有多个DOM节点需要监听事件的情况下，给每个DOM绑定监听函数，会极大的影响页面的性能，因为我们通过事件委托来进行优化，事件委托利用的就是冒泡的原理。
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var li_list = document.getElementsByTagName('li')for(let index = 0;index<li_list.length;index++){li_list[index].addEventListener('click', function(ev){console.log(ev.currentTarget.innerHTML)})}</script>正常情况我们给每一个li都会绑定一个事件，但是如果这时候li是动态渲染的，数据又特别大的时候，每次渲染后（有新增的情况）我们还需要重新来绑定，又繁琐又耗性能；这时候我们可以将绑定事件委托到li的父级元素，即ul 。
var ul_dom = document.getElementsByTagName('ul')ul_dom[0].addEventListener('click', function(ev){console.log(ev.target.innerHTML)})target和currentTarget区别：

target返回触发事件的元素，不一定是绑定事件的元素
currentTarget返回的是绑定事件的元素

优点

提高性能: 每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件，所占用的内存空间更少。
动态监听: 使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

参考自
JS高级程序设计
https://zhuanlan.zhihu.com/p/114276880
https://www.jianshu.com/p/7f5f4c74dde8
https://www.jianshu.com/p/5d2905584a2f
https://www.jianshu.com/p/394e31cc8e7f
本文作者:一只菜鸟攻城狮啊
原文地址:https://www.cnblogs.com/suihang/p/13599887.html

【javascript事件流】