关于JS中事件捕获，事件冒泡与事件代理（事件委托），及e.target与e.currentcurrentTarget的区别

事件捕获：

       表示事件的触发顺序，当绑定事件方法的第三个参数值设置为true时，事件触发的顺序为捕获。

       当一个元素的事件被触发的时候（如onclick事件），该事件会从document开始逐级向下传播，到当前触发事件的节点元素的点击事件。

设有一DIV，其父级元素绑定事件A，其本身绑定事件B，点击到这个DIV时执行的事件顺序为AB。

 

 

事件冒泡：

       表示事件的触发顺序，当绑定事件方法的第三个参数值设置为false时，事件触发的顺序为冒泡。这个参数不作设置时，默认值为false，即默认事件冒泡；

       当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。

设有一DIV，其父级元素绑定事件A，其本身绑定事件B，点击到这个DIV时执行的事件顺序为BA。

 

事件代理/委托（本质是利用事件冒泡）

      利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。

 

*事件委托案例题目（经典面试题）：

<ul>

        <li>item1</li>

        <li>item2</li>

        <li>item3</li>    

</ul>

需求：鼠标放到li上对应的li背景变灰。且绑定的事件对动态添加的li元素有效。

答案：

$("ul").on("mouseover",function(e){

          //这里涉及到了e.target属性的使用

          $(e.target).css(CSS1).siblings().css(CSS2);

 })

有很多小白对这个属性并不是很理解，

e.target属性指向触发事件监听的对象，即如（click事件）点击的当前元素;

e. currentTarget属性指向添加监听事件的对象，即等同于this;

emmmmmm文字很难理解？那举个很简单的例子：

然后我们依次点击两个item：

看出差别了吗？是不是很清晰了？