事件代理的简单应用

近期刚学习了下事件代理，现在就事件代理的简单应用做下总结。

首先介绍下DOM事件流。事件流分为捕获，目标，冒泡。捕获的定义为：从不特定的元素向特定的元素进行触发。冒泡则与捕获相反，是从特定的元素向不特定的元素进行触发。给元素绑定事件时

$(Element).addEventListener("click",function(){},true)

第三个参数决定事件是在什么阶段进行触发。默认的是捕获阶段。第三个参数设置为false时，则是在冒泡阶段这个事件触发。

现在言归正传，事件代理/委托所依托的原理就是冒泡。具体还是上代码吧。

<div class="mod-chapters">
<ul>
<li>
<a href="#" title="">及范围蔓延、期望蔓延、成果蔓延和功能蔓延等问题。（ 9‘50“）</a>
</li>
</ul>
<ul>
<li>
<a href="#"><i class="end"></i>1-1成果蔓延和功能蔓延等问题。（ 9‘50“）</a>
</li>
<li>
<a href="#"><i></i>1-1蔓延、成果蔓延和功能蔓延等问题。（ 9‘50“）</a>
</li>
<li>
<a href="#"><i></i>
        1-1 项目的定义、分类、参数和特征以及范围蔓延、期望蔓延、成果蔓延和功能蔓延等问题。（ 9‘50“）</a>
</li>
</ul>
</div>

业务需要是鼠标放在每个li上面的时候，显示a标签的文字。如果只是对单个的进行操作，很简单，只是现在需要对每个a进行同样的操作，在选择上面有些困难。所以最后采用的是事件代理的方式进行的操作。

//事件代理
$(".mod-chapters li").on("mouseover", function (ev) {
    var ev = ev || window.event;//兼容的写法
    var target = ev.target || ev.$scrollElement; //兼容的写法
    if (target.nodeName.toLowerCase() == "a") { //获得目标元素的节点名称。得到的是大写。toLowerCase()将大写的转为了小写
        target.setAttribute("title", target.text)
    }
}
);

 

转载于:https://my.oschina.net/u/3032291/blog/853332