事件委托定义:
本来是要注册给自己的事件, 注册给了父元素. 事件触发后的事情,委托给父元素执行.
事件委托原理: 事件冒泡
代码节选:
var ul= document.getElementById( 'ul' );
ul.onclick= function( e ){
if( e.target=== ul ){
return;
}
console.log(e.target );
}
首先你得明白浏览器处理事件做的三件事:
1. 当用户触发事件的时候,浏览器就会创建出来一个对应的事件对象
2. 这个事件对象上存储了一些我们需要的信息(比如说鼠标坐标,事件类型,事件对象(事件源));
3. 由于浏览器会把事件对象传递到事件处理函数中,所以我们只需要在事件处理函数的形参上写一个形参,接收即可
具体实现过程:
当我们点击ul中的li时, 浏览器捕捉到的事件源是那个被点击的li, 所以e.target就代表li.(这里应该注意, 即使我们没有给li注册点击事件, 但是当我们点击这个li时, 是有点击事件发生的, 只是说我们没有给这个li注册点击事件来显式地捕捉这个事件, 但是浏览器是会自动捕捉到的)
而e这个对象是会被事件处理函数接收的 ( 至于为什么事件处理函数会接收这个事件对象e? 这就是js中规定好的 ), 而li又没有事件处理函数, 所以它只能等一个对应的事件处理函数(这里因为是li被点击, 所以一定要是点击事件处理函数)出现, 并且有显式的传一个参数像这样:function(e){...}, 这样它就一定能到这个函数里被接收了.
接着ul虽然没被点击, 但是因为事件冒泡的原因, 也会被触发. 虽然它被触发点击事件,但是它没有被点击, 它不是事件源, 所以浏览器中不会创建一个事件对象e来传给ul的事件处理函数, 而浏览器给li创建的事件对象e就会被ul的事件处理函数捕获(因为这个e被浏览器创建出来就是为了给对应的事件处理函数捕获的(这里是点击事件)), 从而我们可以在ul的点击事件处理函数中做一些关于它的子元素li的一些操作.
这就是事件委托的基于事件冒泡的原理.(我感觉是…).