冒泡/捕获/委托 · 前端

# 冒泡与捕获 ## 事件捕获当鼠标点击出发dom事件时，浏览器会从根节点由外到内的传播dom事件。若父节点有对应绑定事件会先触发父节点的事件。 ## 事件冒泡与捕获相反，从内到外 ## addEventListener addEventListener(event,listener,useCapture) event 表示事件 listener事件监听函数 useCapture 是否进行事件捕获，默认false，即采用冒泡模式。 ~~~ <script type="text/javascript"> var father = document.getElementById('father') var child = document.getElementById('child') child.addEventListener('click',function(e){ console.log('childClicked'); // e.stopPropagation; },false) father.addEventListener('click',function(e){ console.log('fatherClicked'); },false) //若此处改为true，则先输出fatherClicked后输出childClicked 因为相当于进行了捕获 </script> ~~~ 这时依次输出 childClicked 和 fatherClicked 因为点击child也相当于点击了father，若不想father也被点击，应采用事件停止传播，即把红色的child增加一句 e.stopPropagation。 ## 事件委托事件委托的原理：事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件 ```html <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="do"> <ul> <li id="111">111</li> <li id="222">222</li> <li id="333">333</li> <li id="444">444</li> </ul> </div> <script type="text/javascript"> var dos = document.getElementById('do') dos.onclick = function(ELE){ console.log(ELE.target.innerHTML) } </script> </body> </html> ``` **什么时候不适合事件委托** 1. focus、blur 之类的事件（又比如mouseenter, mouseleave）本身没有事件冒泡机制，无法进行委托。 2. mousemove、mouseout 这样的事件触发频繁，对性能消耗高，不适合于事件委托。